/* ═══════════════════════════════════════════════════════════════════════
   visurasi-forms.css — Design system UNICO per le form/pagine di ordine.
   Tutte le pagine (report, catasto, ...) usano queste classi .vf-*, così la
   grafica è coerente ovunque. L'accento è una variabile: ogni pagina può
   tingersi col colore del suo settore impostando --vf-accent sul wrapper .vf
   (default blu). Esempio catasto: <div class="vf" style="--vf-accent:#0e9aa7">
   ═══════════════════════════════════════════════════════════════════════ */

.vf{
  --vf-accent:#4fa3e0;
  --vf-accent-ink:#2f7cb8;
  --vf-green:#16a34a;
  --vf-danger:#dc2626;
  --vf-amber:#d97706;
  --vf-surface:#ffffff;
  --vf-surface-2:#f7f9fc;
  --vf-border:#e6ebf2;
  --vf-text:#151d2b;
  --vf-text-soft:#475569;
  --vf-text-mute:#7183a0;
  --vf-shadow:0 1px 3px rgba(16,24,40,.05);
  --vf-shadow-lg:0 18px 40px rgba(16,24,40,.10);
  font-family:'Inter',system-ui,sans-serif;
  max-width:820px;margin:0 auto;color:var(--vf-text);
}
.vf *{box-sizing:border-box}

/* ── Barra di avanzamento ── */
.vf-steps{display:flex;align-items:flex-start;justify-content:center;gap:0;margin:0 auto 30px;max-width:560px}
.vf-step{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;position:relative;text-align:center}
.vf-step::before{content:'';position:absolute;top:18px;right:50%;left:-50%;height:2px;background:var(--vf-border);z-index:0}
.vf-step:first-child::before{display:none}
.vf-step.done::before,.vf-step.active::before{background:var(--vf-accent)}
.vf-dot{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;border:2px solid var(--vf-border);background:var(--vf-surface);color:var(--vf-text-mute);position:relative;z-index:1;transition:all .2s}
.vf-dot .material-icons{font-size:20px}
.vf-step.active .vf-dot{background:var(--vf-accent);border-color:var(--vf-accent);color:#fff;box-shadow:0 4px 12px color-mix(in srgb,var(--vf-accent) 40%,transparent)}
.vf-step.done .vf-dot{background:var(--vf-green);border-color:var(--vf-green);color:#fff}
.vf-step-lbl{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--vf-text-mute)}
.vf-step.active .vf-step-lbl{color:var(--vf-accent)}
.vf-step.done .vf-step-lbl{color:var(--vf-green)}

/* ── Intestazione ── */
.vf-head{margin-bottom:22px}
.vf-title{font-size:27px;font-weight:800;letter-spacing:-.5px;color:var(--vf-text);margin:0 0 6px}
.vf-sub{font-size:15.5px;color:var(--vf-text-mute);margin:0;line-height:1.55}

/* ── Riquadro "Come funziona" ── */
.vf-note{display:flex;gap:14px;align-items:flex-start;background:color-mix(in srgb,var(--vf-accent) 6%,var(--vf-surface));border:1px solid color-mix(in srgb,var(--vf-accent) 20%,var(--vf-border));border-radius:14px;padding:18px 20px;margin-bottom:22px}
.vf-note-ic{width:44px;height:44px;border-radius:12px;background:color-mix(in srgb,var(--vf-accent) 14%,#fff);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.vf-note-ic .material-icons{font-size:24px;color:var(--vf-accent)}
.vf-note-title{font-size:15.5px;font-weight:700;color:var(--vf-text);margin-bottom:4px}
.vf-note-text{font-size:14px;color:var(--vf-text-soft);line-height:1.6}
.vf-note-text strong{color:var(--vf-text);font-weight:600}

/* ── Card ── */
.vf-card{background:var(--vf-surface);border:1px solid var(--vf-border);border-radius:16px;padding:22px 24px;margin-bottom:18px;box-shadow:var(--vf-shadow)}
.vf-card-title{font-size:16px;font-weight:800;color:var(--vf-text);margin:0 0 4px;letter-spacing:-.2px}
.vf-card-sub{font-size:13.5px;color:var(--vf-text-mute);margin:0 0 16px;line-height:1.5}

/* ── Campi ── */
.vf-field{margin-bottom:18px}
.vf-field:last-child{margin-bottom:0}
.vf-label{display:block;font-size:13px;font-weight:700;color:var(--vf-text-soft);margin-bottom:8px;letter-spacing:.1px}
.vf-input,.vf-select{width:100%;height:52px;border:1.5px solid var(--vf-border);border-radius:11px;padding:0 16px;font-size:15.5px;color:var(--vf-text);background:var(--vf-surface-2);font-family:'Inter',sans-serif;transition:border-color .15s,box-shadow .15s,background .15s}
.vf-input::placeholder{color:var(--vf-text-mute)}
.vf-input:focus,.vf-select:focus{outline:none;background:var(--vf-surface);border-color:var(--vf-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--vf-accent) 16%,transparent)}
.vf-input.mono{font-family:'Inter',ui-monospace,monospace;letter-spacing:2px;text-transform:uppercase;font-weight:600}
.vf-input.mono::placeholder{letter-spacing:0;text-transform:none;font-weight:400}
.vf-select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:44px;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%237183a0' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 15px center}
.vf-hint{font-size:12.5px;color:var(--vf-text-mute);margin-top:8px;line-height:1.5}
.vf-err{font-size:13px;color:var(--vf-danger);margin-top:8px;font-weight:600;display:none}
.vf-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.vf-row-3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:600px){.vf-row,.vf-row-3{grid-template-columns:1fr}}

/* ── Controllo segmentato (toggle: attuale/storica, semplice/avanzata, ...) ── */
.vf-seg{display:inline-flex;background:var(--vf-surface-2);border:1.5px solid var(--vf-border);border-radius:12px;padding:4px;gap:4px;flex-wrap:wrap}
.vf-seg-opt{position:relative;display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:9px;font-size:14px;font-weight:600;color:var(--vf-text-soft);cursor:pointer;transition:all .15s;user-select:none;white-space:nowrap}
.vf-seg-opt .material-icons{font-size:18px}
.vf-seg-opt input{position:absolute;opacity:0;pointer-events:none}
.vf-seg-opt:hover{color:var(--vf-text)}
.vf-seg-opt.on{background:var(--vf-accent);color:#fff;box-shadow:0 2px 8px color-mix(in srgb,var(--vf-accent) 35%,transparent)}

/* ── Card di scelta (tipo di report / opzioni) ── */
.vf-choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.vf-choice{position:relative;display:block;background:var(--vf-surface);border:2px solid var(--vf-border);border-radius:14px;padding:18px 20px;cursor:pointer;transition:border-color .15s,box-shadow .15s,transform .15s}
.vf-choice:hover{border-color:color-mix(in srgb,var(--vf-accent) 45%,var(--vf-border));box-shadow:0 6px 18px color-mix(in srgb,var(--vf-accent) 14%,transparent)}
.vf-choice.selected{border-color:var(--vf-accent);background:color-mix(in srgb,var(--vf-accent) 6%,#fff)}
.vf-choice input{position:absolute;opacity:0;pointer-events:none}
.vf-choice::after{content:'';position:absolute;top:16px;right:16px;width:20px;height:20px;border-radius:50%;border:2px solid var(--vf-border);transition:all .15s}
.vf-choice.selected::after{content:'check';font-family:'Material Icons';font-size:14px;line-height:16px;text-align:center;color:#fff;background:var(--vf-accent);border-color:var(--vf-accent)}
.vf-choice-name{font-size:16px;font-weight:800;color:var(--vf-text);margin-bottom:6px;letter-spacing:-.2px;padding-right:26px}
.vf-choice-price{font-size:22px;font-weight:800;color:var(--vf-accent);letter-spacing:-.5px}
.vf-choice-price small{font-size:12.5px;color:var(--vf-text-mute);font-weight:500}
.vf-choice-sub{font-size:12.5px;color:var(--vf-text-mute);margin-top:6px;line-height:1.45}

/* ── Card entità (azienda/persona selezionata) ── */
.vf-entity{display:flex;align-items:flex-start;gap:14px}
.vf-entity-ic{width:50px;height:50px;border-radius:13px;background:color-mix(in srgb,var(--vf-accent) 12%,#fff);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.vf-entity-ic .material-icons{font-size:27px;color:var(--vf-accent)}
.vf-entity-name{font-size:18px;font-weight:800;color:var(--vf-text);letter-spacing:-.2px;margin-bottom:4px;word-break:break-word}
.vf-entity-meta{font-size:13.5px;color:var(--vf-text-mute);line-height:1.6}
.vf-entity-meta strong{color:var(--vf-text-soft);font-weight:600}

/* ── Riepilogo prezzo/saldo ── */
.vf-summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:16px;margin-top:16px;border-top:1px solid var(--vf-border);flex-wrap:wrap}
.vf-price-lbl{font-size:12.5px;color:var(--vf-text-mute)}
.vf-price{font-size:27px;font-weight:800;color:var(--vf-accent);letter-spacing:-.6px}
.vf-saldo{font-size:13px;color:var(--vf-text-mute);text-align:right}
.vf-saldo b{color:var(--vf-text);font-weight:700}
.vf-saldo .neg{color:var(--vf-danger);font-weight:700}
@media(max-width:560px){.vf-summary{flex-direction:column;align-items:flex-start}.vf-saldo{text-align:left}}

/* ── Alert ── */
.vf-alert{border-radius:12px;padding:14px 16px;margin-bottom:18px;display:flex;align-items:flex-start;gap:11px;font-size:14px;line-height:1.5}
.vf-alert .material-icons{font-size:21px;flex-shrink:0;margin-top:1px}
.vf-alert a{color:inherit;font-weight:700}
.vf-alert.err{background:color-mix(in srgb,var(--vf-danger) 8%,#fff);border:1px solid color-mix(in srgb,var(--vf-danger) 25%,#fff);color:#8a1c1c}.vf-alert.err .material-icons{color:var(--vf-danger)}
.vf-alert.warn{background:color-mix(in srgb,var(--vf-amber) 9%,#fff);border:1px solid color-mix(in srgb,var(--vf-amber) 26%,#fff);color:#8a5209}.vf-alert.warn .material-icons{color:var(--vf-amber)}
.vf-alert.ok{background:color-mix(in srgb,var(--vf-green) 9%,#fff);border:1px solid color-mix(in srgb,var(--vf-green) 26%,#fff);color:#12703a}.vf-alert.ok .material-icons{color:var(--vf-green)}
.vf-alert.info{background:color-mix(in srgb,var(--vf-accent) 8%,#fff);border:1px solid color-mix(in srgb,var(--vf-accent) 24%,#fff);color:var(--vf-accent-ink)}.vf-alert.info .material-icons{color:var(--vf-accent)}

/* ── Bottoni ── */
.vf-btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
.vf-btns .vf-btn{flex:1;min-width:180px}
.vf-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:52px;padding:0 26px;border:none;border-radius:12px;font-size:15.5px;font-weight:700;cursor:pointer;text-decoration:none;font-family:'Inter',sans-serif;transition:filter .15s,box-shadow .15s,transform .05s}
.vf-btn .material-icons{font-size:20px}
.vf-btn:active{transform:translateY(1px)}
.vf-btn-primary{background:var(--vf-accent);color:#fff;box-shadow:0 4px 14px color-mix(in srgb,var(--vf-accent) 32%,transparent)}
.vf-btn-primary:hover{filter:brightness(1.06)}
.vf-btn-success{background:var(--vf-green);color:#fff;box-shadow:0 4px 14px color-mix(in srgb,var(--vf-green) 30%,transparent)}
.vf-btn-success:hover{filter:brightness(1.06)}
.vf-btn-ghost{background:var(--vf-surface);color:var(--vf-text-soft);border:1px solid var(--vf-border)}
.vf-btn-ghost:hover{background:var(--vf-surface-2)}
.vf-btn:disabled{background:#cbd5e1;color:#fff;cursor:not-allowed;box-shadow:none;filter:none}

/* ── Riga di ricerca: campo + bottone ────────────────────────────────────────
   Stava scritta a mano dentro tre pagine (cciaa_start, listabilanci, settore) e
   NON esisteva affatto nelle due Cerved: li' la classe non era definita da
   nessuna parte, il div restava un blocco normale e il bottone finiva
   appiccicato sotto il campo senza nemmeno un filo di spazio. Ora sta qui una
   volta sola e vale per tutte e cinque.

   I 240px dicono QUANDO il bottone va a capo, non sono una larghezza da
   difendere: con min-width:0 il campo si stringe sotto quella soglia invece di
   sfondare la colonna sui telefoni stretti (a 320px sfondava di 36px). */
.vf-search-row{display:flex;gap:12px;align-items:stretch;flex-wrap:wrap}
.vf-search-row .vf-input,.vf-search-row .vf-select{flex:1 1 240px;min-width:0}
.vf-search-row .vf-btn{white-space:nowrap;min-width:auto;flex:0 0 auto}

/* Cercare e' un gesto di tutti i giorni, non la conferma di un acquisto: il
   bottone tiene l'altezza del campo — cosi' i due leggono come un pezzo solo —
   ma perde peso e alone colorato. L'alone resta ai bottoni che chiudono un
   ordine, dove serve a dire "questo e' il passo che conta". */
.vf-search-row .vf-btn-primary{padding:0 20px;font-size:15px;font-weight:600;
  box-shadow:0 1px 2px color-mix(in srgb,var(--vf-accent) 22%,transparent)}
.vf-search-row .vf-btn-primary:hover{box-shadow:0 2px 9px color-mix(in srgb,var(--vf-accent) 26%,transparent)}

/* Il prezzo della ricerca sta ACCANTO al bottone, non dentro: il bottone dice
   cosa fa, l'etichetta dice quanto costa. Il verbo resta pulito e il numero si
   legge lo stesso nel punto esatto in cui si decide se cliccare. */
.vf-search-prezzo{display:inline-flex;align-items:center;align-self:center;gap:5px;
  font-size:13.5px;color:var(--vf-text-mute);white-space:nowrap}
.vf-search-prezzo b{font-weight:700;color:var(--vf-text-soft)}

/* ── Griglia meta (risultato) ── */
.vf-meta{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:6px 0 4px}
@media(max-width:560px){.vf-meta{grid-template-columns:1fr}}
.vf-meta-item{background:var(--vf-surface-2);border-radius:10px;border-left:3px solid var(--vf-border);padding:11px 14px}
.vf-meta-label{font-size:11.5px;font-weight:700;color:var(--vf-text-mute);text-transform:uppercase;letter-spacing:.4px;margin-bottom:4px}
.vf-meta-value{font-size:15px;font-weight:600;color:var(--vf-text);word-break:break-word}
.vf-mono{font-family:'Inter',ui-monospace,monospace;letter-spacing:1px}

/* ── Overlay caricamento ── */
.vf-overlay{display:none;position:fixed;inset:0;background:rgba(255,255,255,.82);z-index:9999;align-items:center;justify-content:center}
.vf-overlay.on{display:flex}
.vf-overlay-box{background:var(--vf-surface);border:1px solid var(--vf-border);border-radius:18px;padding:38px 44px;box-shadow:var(--vf-shadow-lg);text-align:center}
.vf-overlay-box .material-icons{font-size:44px;color:var(--vf-accent);animation:vfspin 1.1s linear infinite}
.vf-overlay-title{margin-top:14px;font-size:15.5px;font-weight:700;color:var(--vf-text)}
.vf-overlay-sub{margin-top:5px;font-size:13px;color:var(--vf-text-mute)}
@keyframes vfspin{to{transform:rotate(360deg)}}

/* ════ DARK MODE ════ */
[data-theme="dark"] .vf{
  --vf-surface:#1a2332;--vf-surface-2:#222d40;--vf-border:#334155;
  --vf-text:#e8edf4;--vf-text-soft:#aeb9c9;--vf-text-mute:#8595ab;
  --vf-shadow:0 1px 3px rgba(0,0,0,.3);--vf-shadow-lg:0 18px 40px rgba(0,0,0,.45);
}
[data-theme="dark"] .vf-choice.selected,
[data-theme="dark"] .vf-note{background:color-mix(in srgb,var(--vf-accent) 14%,var(--vf-surface))}
[data-theme="dark"] .vf-alert.err{background:color-mix(in srgb,var(--vf-danger) 16%,var(--vf-surface));color:#fca5a5}
[data-theme="dark"] .vf-alert.warn{background:color-mix(in srgb,var(--vf-amber) 16%,var(--vf-surface));color:#fcd34d}
[data-theme="dark"] .vf-alert.ok{background:color-mix(in srgb,var(--vf-green) 16%,var(--vf-surface));color:#86efac}
[data-theme="dark"] .vf-alert.info{background:color-mix(in srgb,var(--vf-accent) 16%,var(--vf-surface));color:#bfdbfe}
[data-theme="dark"] .vf-overlay{background:rgba(12,18,28,.85)}

/* ═══════════════════════════════════════════════════════════════════════
   BLOCCO ACCESSO — 19/08/2026
   Pagine FUORI sessione: index.php (login), reset_password.php,
   conferma_email.php. Non passano da header.php, quindi si disegnano il
   proprio <body>: qui c'è tutto quello che serve, tokenizzato come il resto.
   ═══════════════════════════════════════════════════════════════════════ */

.vf-login-body{margin:0;background:#f7f9fc}
[data-theme="dark"] .vf-login-body{background:#141b26}

/* Doppia classe .vf.vf-login: serve ad annullare il max-width:820px di .vf.
   box-sizing esplicito perché la regola `.vf *` copre i figli, non .vf stesso
   (stesso inciampo della .vs-app-container a marzo). */
.vf.vf-login{
  max-width:none;margin:0;box-sizing:border-box;width:100%;
  min-height:100vh;min-height:100svh;      /* svh: niente salto con la barra di Safari */
  display:flex;align-items:center;justify-content:center;
  padding:clamp(16px,4vw,40px);
  padding-top:max(clamp(16px,4vw,40px), env(safe-area-inset-top));
  padding-bottom:max(clamp(16px,4vw,40px), env(safe-area-inset-bottom));
  background:var(--vf-surface-2);
}
[data-theme="dark"] .vf-login{background:#141b26}

.vf-login-card{
  width:100%;max-width:960px;background:var(--vf-surface);
  border:1px solid var(--vf-border);border-radius:20px;box-shadow:var(--vf-shadow-lg);
  overflow:hidden;display:grid;grid-template-columns:1fr;   /* telefono: una colonna */
}
@media (min-width:900px){ .vf-login-card{grid-template-columns:1.06fr .94fr} }
/* Variante a colonna singola (recupero password, conferma email) */
.vf-login-card.solo{max-width:460px}
@media (min-width:900px){ .vf-login-card.solo{grid-template-columns:1fr} }

.vf-login-main{padding:clamp(26px,5vw,46px)}
.vf-login-logo{display:block;height:34px;width:auto;margin-bottom:28px}
/* Il marchio è grigio: su fondo scuro va schiarito, altrimenti si spegne
   (stesso problema della .vs-nav-logo sulla topbar). */
[data-theme="dark"] .vf-login-logo{filter:brightness(1.35)}
.vf-login-title{font-size:clamp(22px,4.4vw,28px);font-weight:800;letter-spacing:-.5px;margin:0 0 6px;color:var(--vf-text)}
.vf-login-sub{font-size:15px;color:var(--vf-text-mute);margin:0 0 26px;line-height:1.55}

/* 16px pieni: sotto i 16px iOS zooma da solo il campo al focus e non torna indietro */
.vf-login .vf-input{font-size:16px}

.vf-pass{position:relative}
.vf-pass .vf-input{padding-right:54px}
.vf-pass-toggle{position:absolute;right:5px;top:50%;transform:translateY(-50%);
  width:44px;height:44px;border:none;background:none;cursor:pointer;color:var(--vf-text-mute);
  display:flex;align-items:center;justify-content:center;border-radius:9px}
.vf-pass-toggle:hover{color:var(--vf-text-soft);background:var(--vf-surface-2)}
.vf-pass-toggle:focus-visible{outline:2px solid var(--vf-accent);outline-offset:2px}

.vf-login-row{display:flex;align-items:center;justify-content:flex-end;gap:12px;flex-wrap:wrap;margin:-6px 0 18px}
.vf-link{color:var(--vf-accent-ink);text-decoration:none;font-size:14px;font-weight:600;
  display:inline-flex;align-items:center;min-height:44px}
[data-theme="dark"] .vf-link{color:#8ec5f0}
.vf-link:hover{text-decoration:underline}
.vf-login .vf-btn{width:100%}
.vf-login-foot{margin-top:26px;padding-top:18px;border-top:1px solid var(--vf-border);
  font-size:12.5px;color:var(--vf-text-mute);line-height:1.7}
.vf-login-foot a{color:var(--vf-text-mute);text-decoration:underline}

/* Pannello marchio + contatti (solo login) */
.vf-login-side{
  background:linear-gradient(158deg,#1a2332 0%,#243450 100%);color:#e8edf4;
  padding:clamp(24px,4vw,44px);display:flex;flex-direction:column;justify-content:center;gap:24px;
}
[data-theme="dark"] .vf-login-side{background:linear-gradient(158deg,#141c2a 0%,#1e2b42 100%)}
.vf-login-side h2{font-size:20px;font-weight:800;letter-spacing:-.3px;margin:0;line-height:1.35}
.vf-login-points{list-style:none;margin:0;padding:0;display:grid;gap:13px}
.vf-login-points li{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;color:#c3cede;line-height:1.5}
.vf-login-points svg{flex:0 0 18px;margin-top:2px;color:#4fa3e0}
.vf-login-contact{border-top:1px solid rgba(255,255,255,.14);padding-top:20px;font-size:14px;line-height:1.9}
.vf-login-contact .lbl{display:block;font-size:11.5px;font-weight:700;letter-spacing:.6px;
  text-transform:uppercase;color:#8fa2bd;margin-bottom:6px}
.vf-login-contact a{color:#e8edf4;text-decoration:none;font-weight:600;display:inline-flex;align-items:center;gap:8px}
.vf-login-contact a:hover{text-decoration:underline}
.vf-login-contact svg{color:#4fa3e0;flex:0 0 16px}

/* Sotto i 900px il pannello diventa una fascia di soli contatti, sotto la form:
   chi apre il login dal telefono vuole entrare, non leggere la vetrina. */
@media (max-width:899px){
  .vf-login-side{gap:0;padding:20px clamp(26px,5vw,46px)}
  .vf-login-side h2,.vf-login-points{display:none}
  .vf-login-contact{border-top:none;padding-top:0;display:flex;flex-wrap:wrap;gap:6px 22px;align-items:center}
  .vf-login-contact .lbl{width:100%;margin-bottom:2px}
}
@media (max-width:359px){
  .vf.vf-login{padding:12px}
  .vf-login-card{border-radius:16px}
}

/* ==========================================================================
   Elenco soggetti Cerved (.cv-subj)
   Era duplicato identico in cerved_report_ordine.php e cerved_prospetto_ordine.php.
   Sta qui una volta sola: due copie divergono al primo ritocco.
   ========================================================================== */
.cv-subj{display:flex;gap:13px;align-items:flex-start;background:var(--vf-surface);
  border:1px solid var(--vf-border);border-radius:12px;padding:14px 16px;margin-bottom:10px;
  cursor:pointer;transition:border-color .15s,background .15s,box-shadow .15s,transform .15s}
/* La riga deve dire da sola "cliccami": il solo bordo che si scurisce non
   bastava, chi arriva qui la prima volta non capiva che andava selezionata. */
.cv-subj:hover{border-color:var(--vf-accent);
  background:color-mix(in srgb,var(--vf-accent) 6%,var(--vf-surface));
  box-shadow:0 6px 16px color-mix(in srgb,var(--vf-accent) 16%,transparent);
  transform:translateY(-1px)}
.cv-subj:active{transform:translateY(0)}
.cv-subj.sel{border-color:var(--vf-accent);background:color-mix(in srgb,var(--vf-accent) 7%,var(--vf-surface));
  box-shadow:0 0 0 2px color-mix(in srgb,var(--vf-accent) 30%,transparent)}
.cv-subj-ic{width:42px;height:42px;border-radius:10px;flex-shrink:0;display:flex;align-items:center;
  justify-content:center;background:color-mix(in srgb,var(--vf-accent) 14%,transparent)}
.cv-subj-ic .material-icons{color:var(--vf-accent)}
.cv-subj-body{flex:1;min-width:0}
.cv-subj-name{font-weight:700;color:var(--vf-text)}
.cv-subj-meta{font-size:13px;color:var(--vf-text-mute);margin-top:2px}

/* L'invito a cliccare, sempre visibile: su tablet e telefono il :hover non
   esiste, quindi l'affordance non puo' dipendere solo da quello. */
.cv-subj-go{align-self:center;flex-shrink:0;display:inline-flex;align-items:center;gap:2px;
  padding:6px 8px 6px 13px;border-radius:999px;font-size:13px;font-weight:600;line-height:1;
  white-space:nowrap;color:var(--vf-accent);
  background:color-mix(in srgb,var(--vf-accent) 12%,transparent);
  transition:background .15s,color .15s}
.cv-subj-go .material-icons{font-size:18px}
.cv-subj:hover .cv-subj-go,.cv-subj.sel .cv-subj-go{background:var(--vf-accent);color:#fff}
@media (max-width:560px){
  .cv-subj-go{padding:6px;gap:0}
  .cv-subj-go .cv-subj-go-t{display:none}
}

.cv-badge{display:inline-block;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;
  padding:2px 8px;border-radius:20px;background:color-mix(in srgb,var(--vf-accent) 15%,transparent);
  color:var(--vf-accent);margin-left:6px}
.cv-mono{font-family:ui-monospace,Menlo,Consolas,monospace}
.cv-muted{color:var(--vf-text-mute);font-size:13.5px}