/* =============================================================
   Vado in spiaggia - prova di grafica «alla Apple» (9-10 ottobre 2026)
   Alessandro: «non riesci a sviluppare qualcosa tipo il sito Apple a
   livello grafico?» (la prova squadrata in Helvetica non gli e' piaciuta).

   Le regole del modello: tanto bianco e grigio chiarissimo, testo quasi nero
   e grigio per il secondario; titoli grandi in neretto con le lettere strette;
   il carattere di sistema (SF Pro su iPhone e Mac, Roboto su Android, Segoe
   UI su Windows: niente da scaricare ne' da licenziare); schede bianche molto
   arrotondate e senza bordo sul fondo grigio; un blu solo per quel che si
   tocca; pulsanti a pillola; niente maiuscole spaziate; barre chiare e
   sfocate. Nel tema scuro lo stesso al rovescio, come fa Apple: fondo nero,
   schede grigio scuro, testo chiaro, il blu piu' acceso.

   I colori sono tutti in variabili (--a-...): il tema scuro le ridefinisce e
   basta. Si accende con la classe «grafica» su <html> (vado-tema.js;
   ?grafica=0 la spegne, ?grafica=1 la riaccende). Tutto parte da
   html.grafica: le pagine non si toccano. Le carte svg e WebGL non c'entrano.
   ============================================================= */
html.grafica{
  /* Vadoin Sans, il nostro (caratteri/vadoinsans.css, 10 ottobre 2026): Archivo
     con spigoli smussati, puntini tondi e minuscole piu' alte */
  --display:"Vadoin Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --testo:"Vadoin Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --dati:"Vadoin Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --a-fondo:#f5f5f7;      /* la pagina */
  --a-scheda:#ffffff;     /* le schede */
  --a-testo:#1d1d1f;      /* il testo */
  --a-testo2:#6e6e73;     /* il testo secondario */
  --a-pill:#e8e8ed;       /* le pillole grigie */
  --a-pill2:#dcdce1;      /* sotto il mouse */
  --a-filo:#d2d2d7;       /* i fili */
  --a-blu:#0071e3;        /* quel che si tocca */
  --a-link:#0066cc;
  --a-scelto:#1d1d1f;     /* pillola scelta: fondo */
  --a-scelto-t:#ffffff;   /*                 testo */
  --a-vetro:rgba(251,251,253,.8);
  --a-tondo:18px;
}
html.grafica[data-tema="scuro"]{
  --a-fondo:#000000; --a-scheda:#1c1c1e; --a-testo:#f5f5f7; --a-testo2:#a1a1a6;
  --a-pill:#2c2c2e; --a-pill2:#3a3a3c; --a-filo:#424245; --a-blu:#0071e3; --a-link:#2997ff;
  --a-scelto:#f5f5f7; --a-scelto-t:#1d1d1f; --a-vetro:rgba(22,22,23,.8);
}
html.grafica body{background:var(--a-fondo)!important;color:var(--a-testo);font-size:16px;line-height:1.47;
  letter-spacing:-.011em;-webkit-font-smoothing:antialiased}
html.grafica a{color:var(--a-link)}

/* --- niente maiuscole spaziate: frasi normali --- */
html.grafica .insegna,html.grafica .briciole a,html.grafica .zone button,html.grafica #conto button,
html.grafica .conto-vai,html.grafica .gruppo>span,html.grafica .lg-voce,html.grafica .eti,
html.grafica .bussola,html.grafica .azzera,html.grafica .ritorno,html.grafica .barra-vicino{
  text-transform:none!important;letter-spacing:-.01em!important;font-family:var(--testo)!important}

/* --- i titoli: grandi, pieni, stretti --- */
html.grafica h1,html.grafica h2,html.grafica h3,html.grafica h4,
html.grafica .reg-nome,html.grafica .stato-nome,html.grafica .barra-nome,html.grafica .pref-nome,
html.grafica .oggi-ingresso b,html.grafica .oggi-tema b,html.grafica .foglio-testa h3{
  font-family:var(--display)!important;font-variation-settings:normal!important;font-weight:600!important;
  letter-spacing:-.022em!important;color:var(--a-testo)}
html.grafica h1,html.grafica h1 em{color:var(--a-testo)!important}
html.grafica h1{font-size:clamp(32px,5.2vw,52px)!important;line-height:1.06!important;font-weight:700!important;letter-spacing:-.03em!important}
html.grafica .testa-home-sotto{font-family:var(--testo)!important;font-variation-settings:normal!important;
  font-style:normal!important;color:var(--a-testo2)!important;font-weight:400!important;letter-spacing:-.01em}
html.grafica .gruppo>span{font-size:14px!important;font-weight:600;color:var(--a-testo)}
html.grafica .insegna{font-size:13px!important;color:var(--a-testo2)}

/* --- le schede: tonde, senza bordo, sul fondo --- */
html.grafica .carta-cont,html.grafica .legenda,html.grafica .scheda,html.grafica .reg,html.grafica .stati .stato,
html.grafica .oggi-ingresso,html.grafica .riquadro,html.grafica .foglio,html.grafica .foglio-conto,
html.grafica .avvertenza,html.grafica .spon{
  background:var(--a-scheda)!important;border:0!important;border-radius:var(--a-tondo)!important;box-shadow:none!important}
html.grafica .reg,html.grafica .stati .stato{padding:20px 22px!important;transition:transform .25s,box-shadow .25s}
html.grafica .reg:hover,html.grafica .reg.acceso,html.grafica .stati .stato:hover,html.grafica .stati .stato.acceso{
  transform:scale(1.012)!important;box-shadow:0 4px 24px rgba(0,0,0,.1)!important}
html.grafica .oggi-ingresso.caldo{background:var(--a-scelto)!important;color:var(--a-scelto-t)}
html.grafica .oggi-ingresso.caldo b{color:var(--a-scelto-t)!important}
html.grafica .oggi-ingresso.caldo small{color:var(--a-testo2)}
html.grafica .carta-cont{overflow:hidden}
/* il nome della spiaggia sta sulla foto, su una velatura scura: resta bianco */
html.grafica .fin-sopra h2{color:#fff!important}

/* --- i pulsanti principali: pillole blu --- */
html.grafica .conto-vai,html.grafica #conto button.conto-entra,html.grafica .ck button:first-of-type{
  background:var(--a-blu)!important;color:#fff!important;border:0!important;border-radius:980px!important;
  font-size:14px!important;font-weight:500!important;padding:9px 18px!important}
html.grafica .ck button{border-radius:980px!important;font-family:var(--testo)!important;text-transform:none!important;letter-spacing:-.01em!important;font-size:14px!important}
html.grafica .ck{border-radius:var(--a-tondo) var(--a-tondo) 0 0;background:var(--a-vetro)!important;color:var(--a-testo);
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-top:1px solid var(--a-filo)!important}

/* --- briciole, ritorni, campi: pillole grigie --- */
html.grafica .briciole a,html.grafica .ritorno,html.grafica .barra-vicino{background:var(--a-pill)!important;border:0!important;
  color:var(--a-testo)!important;border-radius:980px!important;font-size:13px!important;font-weight:500;padding:6px 13px!important}
html.grafica .briciole a:hover,html.grafica .ritorno:hover,html.grafica .barra-vicino:hover{background:var(--a-pill2)!important}
html.grafica .cerca{border:1px solid var(--a-filo)!important;border-radius:12px!important;background:var(--a-scheda)!important}
html.grafica .cerca input{color:var(--a-testo)!important}
html.grafica .cerca input::placeholder{color:var(--a-testo2)}
html.grafica .lingua-scelta,html.grafica .tasto-tema,html.grafica .sel{border:1px solid var(--a-filo)!important;border-radius:980px!important;
  background:var(--a-scheda)!important;color:var(--a-testo)!important}

/* --- i filtri: pillole col filo; scelti, pieni --- */
html.grafica button.f{border:1px solid var(--a-filo)!important;border-radius:980px!important;background:var(--a-scheda)!important;
  color:var(--a-testo)!important;font-size:14px;font-weight:500;padding:7px 14px;transition:background .2s,color .2s}
html.grafica button.f:hover:not(.spenta){border-color:var(--a-testo2)!important}
html.grafica button.f[aria-pressed="true"]{background:var(--a-scelto)!important;color:var(--a-scelto-t)!important;border-color:var(--a-scelto)!important}
html.grafica button.f.spenta{background:transparent!important;color:var(--a-testo2)!important;border-style:solid!important;opacity:.6}
html.grafica .azzera{color:var(--a-link)!important;text-decoration:none;font-size:14px}

/* --- le zone: una fila di pillole che scorre, come i filtri dello store --- */
html.grafica .zone{display:flex!important;flex-wrap:nowrap!important;gap:8px!important;overflow-x:auto;
  background:var(--a-scheda)!important;border:0!important;padding:14px 14px 12px!important;scrollbar-width:none}
html.grafica .zone::-webkit-scrollbar{display:none}
html.grafica .zone button{flex:none!important;background:var(--a-pill)!important;color:var(--a-testo)!important;border:0!important;
  border-radius:980px!important;font-size:13px!important;font-weight:500!important;padding:8px 15px!important;white-space:nowrap!important}
html.grafica .zone button:hover{background:var(--a-pill2)!important}
html.grafica .zone button[aria-pressed="true"]{background:var(--a-scelto)!important;color:var(--a-scelto-t)!important}

/* --- i pulsanti sulla carta (la carta resta chiara anche di sera): bianchi --- */
html.grafica .comandi button{border:0!important;border-radius:12px!important;background:rgba(255,255,255,.94)!important;
  color:#1d1d1f!important;box-shadow:0 2px 10px rgba(0,0,0,.14)!important}
html.grafica .comandi button[aria-pressed="true"]{background:#0071e3!important;color:#fff!important}
html.grafica .bussola{border-radius:980px!important;border:0!important;background:rgba(255,255,255,.9)!important;color:#1d1d1f!important;font-size:11px!important}

/* --- le barre in alto: vetro sfocato --- */
html.grafica .barra-alta{background:var(--a-vetro)!important;-webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--a-filo)!important}
html.grafica .barra-alta.staccata{box-shadow:none!important}

/* --- l'elenco, la scheda sul telefono, il piede --- */
html.grafica .elenco li:hover,html.grafica .elenco li.attivo{background:var(--a-pill);color:var(--a-testo)}
@media (max-width:700px){
  html.grafica .scheda:not([hidden]){border-radius:var(--a-tondo) var(--a-tondo) 0 0!important;box-shadow:0 -6px 30px rgba(0,0,0,.18)!important}
}
html.grafica .piede-sito{background:var(--a-fondo)!important;color:var(--a-testo2);font-size:12px}
html.grafica .piede-sito *{color:var(--a-testo2)}
html.grafica .piede-sito a{color:var(--a-link)}
/* il collegamento sulla foto (sotto il nome della spiaggia): bianco */
html.grafica .fin-apri{color:#fff!important}

/* le zone sul computer (10 ottobre 2026, Alessandro: «da browser web non si
   riesce a scorrere»): col mouse una fila che scorre di lato non si sposta
   con la rotella e la barra era nascosta. Dove c'e' il mouse le pillole vanno a
   capo e si vedono tutte; sul telefono resta la fila che scorre col dito, con
   una sfumatura a destra che dice che continua. */
@media (hover:hover) and (pointer:fine){
  html.grafica .zone{flex-wrap:wrap!important;overflow-x:visible}
}
@media (hover:none),(pointer:coarse){
  html.grafica .zone{-webkit-mask-image:linear-gradient(to left,transparent 0,#000 34px);
    mask-image:linear-gradient(to left,transparent 0,#000 34px);padding-right:34px!important}
}

/* la barra del conto (10 ottobre 2026): stesso carattere, centrati, con l'icona */
html.grafica .conto-gest,html.grafica .conto-esci{font-family:var(--testo)!important;font-size:13px!important;font-weight:500!important;
  letter-spacing:-.01em!important;text-transform:none!important;padding:7px 13px!important;border-radius:980px!important;
  border:1px solid var(--a-filo)!important;background:var(--a-scheda)!important;color:var(--a-testo)!important}
html.grafica .conto-gest:hover,html.grafica .conto-esci:hover{border-color:var(--a-testo2)!important}
html.grafica .tasto-tema{color:var(--a-testo)!important}
/* «Vicino a me» dentro la ricerca: niente pillola grigia, una scritta blu staccata da un filo */
html.grafica .barra-vicino{background:transparent!important;color:var(--a-link)!important;border-radius:0!important;
  border-left:1px solid var(--a-filo)!important;padding:0 14px!important;height:auto!important;align-self:stretch}
html.grafica .barra-vicino:hover{background:transparent!important;color:var(--a-blu)!important}

/* le liste pronte: schede colorate con il disegno, le scritte restano bianche */
html.grafica .oggi-tema{border-radius:var(--a-tondo)!important;box-shadow:none!important}
html.grafica .oggi-tema b,html.grafica .oggi-tema small{color:#fff!important}

/* la pillola del livello accanto al conto (10 ottobre 2026): come le altre pillole */
html.grafica .conto-livello{font-family:var(--testo)!important;font-size:13px!important;border:1px solid var(--a-filo)!important;
  background:var(--a-scheda)!important;color:var(--a-testo)!important;border-radius:980px!important}
html.grafica a.conto-livello:hover{border-color:var(--a-testo2)!important}
html.grafica .cl-punti{color:var(--a-testo2)}
html.grafica .pt-dist li,html.grafica .pt-gara{border-color:var(--a-filo);background:var(--a-scheda)}