/* Stile di vetro: sfondo fotografico, pannelli traslucidi, densita' regolabile (variabile --g). Attivo con body.vetro. */
:root{--g:.46}
#vetro-sfondo{position:fixed;inset:0;z-index:-1;display:none;overflow:hidden;background:#0a0f1e;pointer-events:none}
body.vetro #vetro-sfondo{display:block}
#vetro-sfondo svg{position:absolute;inset:0;width:100%;height:100%}
#vetro-sfondo .vignetta{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 45%,rgba(0,0,0,0) 45%,rgba(3,5,12,.55) 100%)}
body.vetro{background:#0a0f1e;background-image:none;color:#f2f5fb;--tenue:#c9d1e2;--bordo:rgba(255,255,255,.2)}

/* superfici di vetro: vale per tutta l'app */
body.vetro header,body.vetro .carta,body.vetro .pannello,body.vetro .scheda,body.vetro .scena .legenda,body.vetro .pan,body.vetro .voce,body.vetro .pill{
  background-color:rgba(10,14,26,calc(.46 + var(--g) * .5));
  background-image:linear-gradient(135deg,rgba(255,255,255,.12) 0%,rgba(255,255,255,.03) 38%,rgba(255,255,255,0) 60%,rgba(255,255,255,.05) 100%);
  border:1px solid rgba(255,255,255,.2);
  -webkit-backdrop-filter:blur(26px) saturate(150%) brightness(.5);backdrop-filter:blur(26px) saturate(150%) brightness(.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -1px 0 rgba(255,255,255,.05),0 28px 60px -22px rgba(0,0,0,.7),0 2px 6px rgba(0,0,0,.25)}
body.vetro header{border-width:0 0 1px 0;border-radius:0}
body.vetro .carta,body.vetro .pannello,body.vetro .pan{border-radius:22px}
body.vetro .pannello-sfondo{background:rgba(3,5,12,.5)}
body.vetro .pannello{border-radius:22px 0 0 22px}
body.vetro .agente:hover,body.vetro .carta.cliccabile:hover{border-color:#ffc46b}
body.vetro input[type=text],body.vetro input[type=email],body.vetro input[type=password],body.vetro input[type=number],body.vetro input[type=search],body.vetro input[type=tel],body.vetro input[type=url],body.vetro select,body.vetro textarea{
  background:rgba(0,0,0,.28);border-color:rgba(255,255,255,.24);color:#f2f5fb}
body.vetro button.s{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.26);color:#f2f5fb}
body.vetro td,body.vetro th{border-bottom-color:rgba(255,255,255,.14)}
body.vetro *:focus-visible{outline:2px solid #ffc46b;outline-offset:2px}

/* ----- elementi comuni ai controlli di aspetto ----- */
.pl-gruppo{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.pl-gruppo>span{font-size:12px;color:#c9d1e2;margin-right:2px}
.pl-chip{height:32px;padding:0 13px;border-radius:999px;border:1px solid rgba(255,255,255,.26);background:rgba(255,255,255,.06);color:#f2f5fb;font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.pl-chip[aria-pressed=true]{background:rgba(255,196,107,.24);border-color:#ffc46b;color:#ffe2a8}
.pl-chip:disabled{opacity:.45;cursor:default}
.pl-gruppo input[type=range]{width:130px;accent-color:#ffc46b;padding:0;border:0;background:none}
.pl-gruppo label{display:inline;margin:0;font-weight:400;font-size:12px;color:#c9d1e2}

/* ----- stessa grafica su tutto il sito: bottoni a pillola, schede e tessere di vetro, etichette, messaggi ----- */
body.vetro nav button{border-radius:999px;color:#c9d1e2;font-weight:600}
body.vetro nav button:hover{background:rgba(255,255,255,.1);color:#f2f5fb}
body.vetro nav button.attivo{background:linear-gradient(90deg,#f3b54a,#e58bd0);color:#1a1204}
body.vetro button.p{border-radius:999px;background:#ffc46b;color:#1a1204;font-weight:700;border:0;box-shadow:0 6px 18px -8px rgba(255,196,107,.7)}
body.vetro button.p:hover{background:#ffd28c}
body.vetro button.s{border-radius:999px;font-weight:600}
body.vetro button.s:hover{background:rgba(255,255,255,.16)}
body.vetro button.r{border-radius:999px;background:rgba(248,113,113,.18);color:#fecaca;border:1px solid rgba(248,113,113,.4)}
body.vetro .tessera,body.vetro .colonna-task,body.vetro .task-riga,body.vetro .task-scheda,body.vetro details.richiesta,body.vetro .menu-imp button,body.vetro .metriche div,body.vetro .accesso .carta{
  background-color:rgba(10,14,26,calc(.34 + var(--g) * .5));
  background-image:linear-gradient(135deg,rgba(255,255,255,.1) 0%,rgba(255,255,255,.02) 40%,rgba(255,255,255,0) 62%,rgba(255,255,255,.04) 100%);
  border:1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter:blur(22px) saturate(140%) brightness(.55);backdrop-filter:blur(22px) saturate(140%) brightness(.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 18px 40px -22px rgba(0,0,0,.65)}
body.vetro .tessera,body.vetro .colonna-task{border-radius:18px}
body.vetro .task-riga,body.vetro .task-scheda,body.vetro details.richiesta,body.vetro .menu-imp button,body.vetro .metriche div{border-radius:14px}
body.vetro .menu-imp button.attivo,body.vetro .menu-imp button[aria-current]{border-color:#ffc46b;background-color:rgba(255,196,107,.2)}
body.vetro .tessera .valore{color:#ffc46b}
body.vetro .etichetta,body.vetro .chip{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#f2f5fb}
body.vetro .etichetta.ok,body.vetro .chip.ok{background:rgba(74,222,128,.16);border-color:rgba(74,222,128,.45);color:#bbf7d0}
body.vetro .etichetta.no{background:rgba(248,113,113,.16);border-color:rgba(248,113,113,.45);color:#fecaca}
body.vetro .etichetta.avv{background:rgba(255,196,107,.18);border-color:rgba(255,196,107,.5);color:#ffe2a8}
body.vetro .messaggio{border-radius:16px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
body.vetro .messaggio.ok{background:rgba(74,222,128,.14);border-color:rgba(74,222,128,.4);color:#bbf7d0}
body.vetro .messaggio.no{background:rgba(248,113,113,.14);border-color:rgba(248,113,113,.4);color:#fecaca}
body.vetro .messaggio.avv{background:rgba(255,196,107,.15);border-color:rgba(255,196,107,.45);color:#ffe2a8}
body.vetro .voce{border-radius:16px}
body.vetro .pannello .azioni{background:rgba(8,11,20,.85)}
body.vetro .msg-org{border-left-color:#ffc46b}
body.vetro .scena{border:1px solid rgba(255,255,255,.2);border-radius:22px;overflow:hidden}
body.vetro h3{color:#c9d1e2}

@keyframes vt-deriva{0%{transform:translateX(-40px)}50%{transform:translateX(50px)}100%{transform:translateX(-40px)}}
.vt-d1{animation:vt-deriva 38s ease-in-out infinite}.vt-d2{animation:vt-deriva 52s ease-in-out infinite reverse}

@media (prefers-reduced-motion:reduce){.vt-d1,.vt-d2{animation:none}}
@media (prefers-reduced-transparency:reduce){
  body.vetro header,body.vetro .carta,body.vetro .pannello,body.vetro .scheda,body.vetro .scena .legenda,body.vetro .pan,body.vetro .voce,body.vetro .pill,body.vetro .tessera,body.vetro .colonna-task,body.vetro .task-riga,body.vetro .task-scheda,body.vetro details.richiesta,body.vetro .menu-imp button,body.vetro .metriche div{
    -webkit-backdrop-filter:none;backdrop-filter:none;background-color:rgba(10,14,26,.96);background-image:none}}

/* sfondo con opere d'arte: due strati che si sfumano l'uno nell'altro */
#vetro-sfondo .arte-l{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 3s ease}
#vetro-sfondo .arte-l.on{opacity:1}
#vetro-didascalia{position:fixed;right:8px;bottom:4px;z-index:3;max-width:min(520px,70vw);font-size:10.5px;line-height:1.3;color:rgba(255,255,255,.8);background:rgba(5,8,16,.55);padding:2px 8px;border-radius:6px;text-shadow:0 1px 2px #000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#vetro-didascalia a{color:inherit;text-decoration:underline}
body:not(.vetro) #vetro-didascalia{display:none}