/* FILE GENERATO da mare/grafica.css (comune/parti_comuni.py): non modificare qui. */
/* =============================================================
   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);
}
/* anche la pagina sotto il corpo: di sera, sulle pagine corte, restava una fascia blu notte (11 ottobre 2026) */
html.grafica{background:var(--a-fondo)!important}
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,
/* «Scopri la spiaggia» nella spiaggia di oggi: e' un <a>, e la regola dei link lo faceva blu su blu */
html.grafica a.oggi-vai{
  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}
/* la pillola della pagina in cui si e': accesa come la zona scelta (14 ottobre 2026) */
html.grafica .ritorno[aria-current="page"],html.grafica .conto-gest[aria-current="page"],
html.grafica .conto-livello[aria-current="page"]{background:var(--a-scelto)!important;color:var(--a-scelto-t)!important;
  border-color:var(--a-scelto)!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}
/* di sera i pulsanti della carta non restano bianchi sulla carta scura (11 ottobre 2026) */
html.grafica[data-tema="scuro"] .comandi button:not([aria-pressed="true"]){background:rgba(44,44,46,.94)!important;color:#f5f5f7!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 --- */
/* la scheda dal telefono ha gli angoli dritti: la barra va da bordo a bordo (13 ottobre 2026) */
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: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: il 10 ottobre andavano a capo («da browser web non si
   riesce a scorrere»); dal 14 ottobre stanno su una riga che si sposta con la
   rotella, trascinandola e con le frecce (vado-carta.js). Sfumate dal lato dove
   continuano. 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{cursor:grab}
  html.grafica .zone-fila.a-dx .zone{-webkit-mask-image:linear-gradient(to left,transparent 0,#000 64px);
    mask-image:linear-gradient(to left,transparent 0,#000 64px)}
  html.grafica .zone-fila.a-sx .zone{-webkit-mask-image:linear-gradient(to right,transparent 0,#000 64px);
    mask-image:linear-gradient(to right,transparent 0,#000 64px)}
  html.grafica .zone-fila.a-sx.a-dx .zone{
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 64px,#000 calc(100% - 64px),transparent 100%);
    mask-image:linear-gradient(to right,transparent 0,#000 64px,#000 calc(100% - 64px),transparent 100%)}
  html.grafica .zone-freccia{background:var(--a-scheda)!important;border-color:var(--a-filo)!important;color:var(--a-testo)!important}
}
@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)}
html.grafica a.oggi-vai:hover{filter:brightness(1.08);text-decoration:none}

/* La testata della home, compatta e uguale in tutti i siti Vado in (18 ottobre 2026, Alessio:
   «il banner in alto del mare della stessa grandezza di quello della montagna»). Prima stava solo
   nella montagna (navigazione-carta.css). */
.testa-home{padding-top:7px!important;padding-bottom:7px!important}
.testa-home-dentro{max-width:none!important;display:grid!important;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;align-items:baseline}
html.grafica body .testa-home .barra-stato{grid-row:1;grid-column:1 / -1}
html.grafica body .testa-home h1#titolo{grid-row:2;grid-column:1}
html.grafica body .testa-home #sommario{grid-row:2;grid-column:2;margin:0!important;white-space:nowrap}
html.grafica body .testa-home .testa-home-sotto{grid-row:3;grid-column:1 / -1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.grafica body .testa-home h1#titolo{font-size:clamp(22px,2.3vw,30px)!important;line-height:1.1!important}
.testa-home-sotto{font-size:13px!important;line-height:1.3!important;margin:4px 0 0!important}
.testa-home .sommario{font-size:12px!important;margin:3px 0 0!important}
.testa-home .barra-stato{margin-bottom:4px!important}
.testa-home .ritorno{font-size:11px!important;padding:3px 7px!important}
/* sul telefono il conto non sta accanto al titolo: ci finiva sopra (22 ottobre 2026, voce 20). Scende nella riga
   del sottotitolo, a destra, e il titolo ha tutta la riga per stare su una riga sola */
@media (max-width:620px){
  html.grafica body .testa-home h1#titolo{grid-column:1 / -1}
  html.grafica body .testa-home #sommario{grid-row:3;grid-column:2;align-self:baseline}
  html.grafica body .testa-home .testa-home-sotto{grid-column:1}
}

/* I colori della carta d'insieme della home (Europa, paese, regioni), uguali in tutti i siti
   Vado in e in tutti e due i temi: quelli del mare (18 ottobre 2026, Alessio: «omogenizza i
   colori della mappa della spiaggia in montagna»). Il tema scuro della pagina non li tocca: la
   terra resta chiara e le regioni disponibili si distinguono da quelle spente. */
#carta{--terra:#f7f0dd;--terra-b:#cbb98e;--basso:#9ed4ea;--blu:#0c5b87;--profondo:#083c5c;
  --ambra:#cf8a13;--grigio:#5f849c;--secca:#c9e5f3;--schiuma:#e6f2f9}
/* LA CARTA D'INSIEME HA UNA FORMA SOLA, IN TUTTI I SITI (19 ottobre 2026, Alessio: «perche'
   le mappe della home di mare e montagna non sono uguali?», «l'Europa troppo ristretta»).
   Prima ogni home aveva la sua: il mare un riquadro con la forma dell'Europa (sul telefono
   una striscia alta 170 pixel) che cambiava forma entrando in un paese, la montagna un
   riquadro alto sul telefono con l'Europa in una fascia in mezzo. Ora il riquadro e' lo
   stesso e non cambia mai forma: sul computer largo quanto la colonna e alto il 62% dello
   schermo, sul telefono 1,3 a 1 (una regola sola, continua: vedi sotto). Dentro, la vista dell'Europa prende la forma del riquadro
   con un po' di respiro intorno (comune/navigazione/ponte.js, europaAmpia). Le regole
   battono quelle delle singole pagine (index.html del mare, navigazione-carta.css della
   montagna): la forma si cambia solo qui. Solo la home: le pagine regione hanno lo stesso
   riquadro ma con id="telaio" (:not(#telaio)), e le sue misure restano quelle del motore. */
html body .impaginato .carta-cont:not(:has(#telaio)){max-width:none!important;margin-inline:0!important;width:100%!important}
/* Una regola sola, continua (20 ottobre 2026, Alessio: «stringendo la pagina la mappa ha degli scatti
   improvvisi»): l'altezza segue la larghezza (1,3 a 1) ma non supera il 62% dello schermo ne' 680
   pixel. Prima c'erano due regole, cambiate di colpo a 860 pixel. */
html body .impaginato .telaio:not(#telaio){width:100%!important;height:auto!important;aspect-ratio:1.3!important;
  max-height:min(62vh,680px)!important;min-height:0!important;max-width:100%!important}

/* Confini e reticolo come nella montagna, in tutti i siti e in tutti e due i temi (19 ottobre
   2026, Alessio: «i colori delle regioni e dei confini quelli della montagna»): il confine dei
   paesi aperti e delle regioni in blu pieno, sottile e uguale a ogni ingrandimento; il reticolo
   dei gradi chiaro anche di sera (il tema scuro del mare lo spegneva e schiariva i confini).
   Prima stavano in montagna/sito/navigazione-carta.css, solo per la montagna. */
html.grafica body .telaio:not(#telaio)>#carta .reg-carta path,
html.grafica body .telaio:not(#telaio)>#carta .stato-carta:not(.spento) path{stroke:var(--blu)!important;stroke-width:1.25px!important;stroke-dasharray:none!important;
  stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
html.grafica body .telaio:not(#telaio)>#carta .reg-carta:focus-visible path{stroke:var(--ambra)!important}
html.grafica body .telaio:not(#telaio)>#carta .griglia{stroke:var(--secca)!important;opacity:.65!important}
/* Niente alone azzurro sulla costa (il «litorale censito» del mare, #gCoste, tre passate larghe):
   la montagna non l'ha mai avuto e i contorni sembravano spessi e azzurri (19 ottobre 2026,
   Alessio). Senza colore la scheda grafica lo salta (indice-gl.js). */
html.grafica body .telaio:not(#telaio)>#carta #gCoste,
html.grafica body .telaio:not(#telaio)>#carta .coste-riq{display:none!important}
html.grafica body .telaio:not(#telaio)>#carta #gCoste use,
html.grafica body .telaio:not(#telaio)>#carta .coste-riq use{stroke:none!important}

/* I bordi della carta d'insieme sfumano come nella montagna, in tutti i siti (19 ottobre 2026,
   Alessio: «i bordi della mappa devono essere come la montagna»): in alto appena, in basso dal
   83%, a destra dall'85%, a sinistra niente. Il mare aveva le sue sfumature (piu' lunghe sopra
   e sotto, anche a sinistra dentro un paese, carte-spiagge.css): queste le battono. */
html body .telaio .indice-webgl,
html.grafica body #carta.camera-attiva{
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 4.5%,#000 83%,transparent),linear-gradient(to right,#000 85%,transparent)!important;
  mask-image:linear-gradient(to bottom,transparent,#000 4.5%,#000 83%,transparent),linear-gradient(to right,#000 85%,transparent)!important;
  -webkit-mask-composite:source-in!important;mask-composite:intersect!important}

/* LA CARTA D'INSIEME COMPARE INTERA (20 ottobre 2026, Alessio: «la mappa non appare tutta gia' disegnata di
   botto, i confini arrivano dopo e sembra ci sia uno spostamento leggero di zoom»). Prima si vedeva la carta
   svg di riserva, con l'inquadratura stretta di partenza; poi arrivava quella della scheda grafica, con altri
   confini e l'Europa larga. Ora il riquadro c'e' da subito e il disegno resta nascosto finche' ponte.js non
   dice che quello definitivo e' pronto (.carta-pronta): allora compare tutto insieme, gia' inquadrato. Se
   lo script non arriva, dopo 3,5 secondi compare comunque. */
.telaio:not(#telaio)>:is(svg,canvas){opacity:0;transition:opacity .6s cubic-bezier(.16,1,.3,1)}
.telaio:not(#telaio).carta-pronta>:is(svg,canvas){opacity:1}
.telaio:not(#telaio):not(.carta-pronta)>:is(svg,canvas){animation:vado-carta-sicura 0s 3.5s forwards}
@keyframes vado-carta-sicura{to{opacity:1}}
/* la striscia rossa entra con la carta, non sopra il riquadro ancora vuoto */
.telaio:not(#telaio):not(.carta-pronta)>.vado-sblocca{animation-play-state:paused}

/* la carta si sposta col dito e si ingrandisce con due dita (ponte.js), dentro un paese e dal
   20 ottobre 2026 anche sull'Europa: il gesto e' della carta, non della pagina */
.telaio:not(#telaio)>#carta{touch-action:none}
.telaio:not(#telaio)>#carta[data-stato]:not([data-stato=""]){cursor:grab}
.telaio:not(#telaio)>#carta[data-stato]:not([data-stato=""]):active{cursor:grabbing}

/* le regioni chiuse a chi guarda (comune/navigazione/sblocchi.js): visibili ma spente.
   20 ottobre 2026 (Alessio: «nel tema chiaro le regioni disattivate non si capiscono»): di giorno il
   grigio scuro di prima pesava piu' della regione aperta e sembrava lei quella accesa. Ora spenta vuol
   dire piu' chiara e senza colore; la sera resta il grigio di prima, che sul fondo scuro e' gia' spento. */
#carta{--terra-chiusa:#d8d6d2}
#carta .reg-carta.vado-chiusa path{fill:var(--terra-chiusa)}
html[data-tema="scuro"] #carta{--terra-chiusa:#b9b3a3}

/* comune a tutti i siti dal 19 ottobre 2026 (prima in carte-spiagge.css) */
/* «© OpenStreetMap» nell'angolo della carta (Attribution Guidelines dell'OSMF,
   18 ottobre 2026): in alto a destra, dove non ci sono bussola e pulsanti */
.telaio .crediti-osm{position:absolute;top:6px;right:8px;z-index:2;font-size:10.5px;line-height:1.3;
  padding:1px 6px;border-radius:5px;color:var(--profondo);background:color-mix(in srgb,var(--carta) 78%,transparent);text-decoration:none}
.telaio .crediti-osm:hover,.telaio .crediti-osm:focus-visible{text-decoration:underline}

/* IL CONTO IN UN MENU, in tutte le pagine e a ogni larghezza (20 ottobre 2026, Alessio: «fallo sempre
   in questo modo anche quando la pagina e' larga»). Chi e' entrato (.dentro, vado-conto.js) vede un tondo
   con le iniziali; toccandolo si apre il pannello con livello, indirizzo, I miei luoghi, Confronta,
   Gestione ed Esci. Chi non e' entrato vede «Accedi / Registrati» (sul telefono, nelle home, il tondo con
   l'omino, come prima). Prima il pannello c'era solo sotto i 620 pixel e solo nelle home. */
html.grafica .barra-conto{position:relative;flex:none;display:flex;align-items:center}
html.grafica .barra-conto.dentro .conto-scrigno{display:inline-flex!important}
html.grafica .barra-conto:not(.dentro) .conto-scrigno:not(#contoScrigno){display:none!important}
html.grafica .conto-scrigno{width:32px;height:32px;border-radius:50%;cursor:pointer;border:0;padding:0;
  align-items:center;justify-content:center;background:var(--profondo,#083c5c);color:#fff;
  font:600 11px/1 var(--dati,inherit);letter-spacing:.02em;transition:background .15s,transform .15s}
html.grafica .conto-scrigno:hover,html.grafica .conto-scrigno:focus-visible{transform:scale(1.06)}
html.grafica .conto-scrigno svg{width:15px;height:15px;display:block}
html.grafica .barra-conto.dentro .conto{position:absolute!important;top:calc(100% + 10px);right:0;z-index:40;
  display:none!important;flex-direction:column!important;align-items:stretch!important;flex-wrap:nowrap!important;gap:6px!important;
  min-width:220px;padding:12px!important;border-radius:16px!important;background:var(--a-scheda,#fff)!important;
  border:1px solid var(--a-filo,#d2d2d7)!important;box-shadow:0 22px 48px -18px rgba(0,0,0,.38)!important}
html.grafica .barra-conto.dentro.aperto .conto{display:flex!important;animation:vado-menu .2s cubic-bezier(.16,1,.3,1)}
@keyframes vado-menu{from{opacity:0;transform:translate3d(0,-6px,0) scale(.98)}to{opacity:1;transform:none}}
html.grafica .barra-conto.dentro .conto-chi{display:none!important}
html.grafica .barra-conto.dentro .conto-email{display:block!important;padding:2px 2px 6px;border-bottom:1px solid var(--a-filo,#d2d2d7);
  font-size:11px;color:var(--a-testo2,#6e6e73);word-break:break-all}
html.grafica .barra-conto.dentro .conto-gest,html.grafica .barra-conto.dentro .conto-esci{justify-content:flex-start!important;width:100%}
html.grafica .barra-conto.dentro .conto-gest span,html.grafica .barra-conto.dentro .conto-esci span{display:inline!important}
html.grafica .barra-conto.dentro .conto-livello{align-self:flex-start}
html.grafica .barra-conto.dentro .cl-nome,html.grafica .barra-conto.dentro .cl-punti{display:inline!important}
/* chi non e' entrato, su schermo largo: il pulsante per entrare, non un pannello vuoto */
@media (min-width:621px){
  html.grafica .barra-conto:not(.dentro) #contoScrigno{display:none!important}
  html.grafica .barra-conto:not(.dentro) .conto{position:static!important;display:flex!important;box-shadow:none;border:0;padding:0;background:none}
}

/* Niente pulsante «Home page» nella home (20 ottobre 2026, Alessio: «non c'e' bisogno che appaia»): si torna
   all'Europa dal logo o dal nome del sito, che si vedono cliccabili (ponte.js) */
#barraStato{display:none!important}
html.grafica .barra-nome{cursor:pointer;border-radius:6px;transition:color .15s}
html.grafica .barra-nome:hover,html.grafica .barra-nome:focus-visible{text-decoration:underline;text-underline-offset:3px}
html.grafica .barra-marchio{cursor:pointer;transition:transform .15s}
html.grafica .barra-marchio:hover{transform:scale(1.06)}

/* I PULSANTI ACCANTO ALLA CARTA FINCHE' C'E' SPAZIO (20 ottobre 2026, Alessio: «i tile laterali scompaiono
   per poi riapparire: devono essere fissi e visibili finche' c'e' spazio»). La colonna si stringe con la
   finestra (da 236 a 150 pixel) e va sotto la carta solo sotto i 560 pixel, uguale nei due siti (prima a
   700 nel mare, a 600 nella montagna). Sotto i 560 valgono le regole strette delle pagine. */
/* la soglia la decide la classe «vado-stretto» su <html> (vado-dati.js), cosi' il cambio passa da una
   transizione di vista invece di scattare */
  html:not(.vado-stretto) body .impaginato.con-tile:has(>#spiaggiaOggi){grid-template-columns:minmax(0,1fr) clamp(150px,22vw,236px)!important;
  grid-template-areas:'carta porte' 'oggi oggi' 'liste liste' 'pannello pannello'!important;gap:16px clamp(10px,1.6vw,18px)!important}
html:not(.vado-stretto) body .impaginato.con-tile:has(>#postoOggi){grid-template-columns:minmax(0,1fr) clamp(150px,22vw,236px)!important;
  grid-template-areas:'carta tile' 'pannello tile' 'oggi oggi'!important;gap:14px clamp(10px,1.6vw,18px)!important}
html:not(.vado-stretto) body .con-tile>.oggi-ingressi{display:flex!important;flex-direction:column!important;gap:8px!important}
html:not(.vado-stretto) body .con-tile .oggi-ingresso{grid-template-columns:clamp(20px,2.2vw,28px) minmax(0,1fr)!important;column-gap:clamp(6px,.8vw,9px)!important;
  min-height:clamp(54px,6vw,66px)!important;padding:clamp(7px,.9vw,10px) clamp(8px,1vw,12px)!important}
html:not(.vado-stretto) body .con-tile .oggi-ingresso .ico{font-size:clamp(17px,1.9vw,22px)!important}
html:not(.vado-stretto) body .con-tile .oggi-ingresso b{font-size:clamp(12.5px,1.3vw,15px)!important}
html:not(.vado-stretto) body .con-tile .oggi-ingresso small{font-size:clamp(10px,1vw,11.5px)!important
}

/* La carta delle pagine regione, anche lei con una regola sola e continua (20 ottobre 2026): l'altezza segue
   la larghezza (3 a 4, un po' piu' alta che larga) ma non supera il 72% dello schermo ne' 880 pixel, e non
   scende sotto i 320. Prima tre regole (sopra i 960 pixel, fino a 700, sotto) e a ogni soglia un salto. */
html body .impaginato #telaio{width:100%!important;height:auto!important;aspect-ratio:3/4!important;
  max-height:min(72vh,880px)!important;min-height:320px!important}

/* Nessun rettangolo azzurro al tocco sulle carte, in tutti i siti (20 ottobre 2026, Alessio, dal telefono:
   «quando si preme col dito su una regione appaiono rettangoli blu»). Chrome su Android evidenzia il
   collegamento toccato con il suo rettangolo: per una regione della carta e' il riquadro che la contiene.
   Il mare lo spegneva gia' (carte-spiagge.css, 17 ottobre); ora vale anche per la montagna e i siti nuovi.
   Il sorvolo e la regione accesa restano quelli della carta. */
#carta a,#carta [data-k],.telaio a,.telaio svg *{-webkit-tap-highlight-color:transparent}

/* IL POSTO DELLA SPIAGGIA (O DEL POSTO) DI OGGI E' TENUTO DA SUBITO (20 ottobre 2026, Alessio: «tutto deve
   sembrare stampato a schermo, solido»). La scheda arriva dopo un secondo (meteo e foto) e spingeva giu' di
   450 pixel tutto quello che c'era sotto, nel mare anche le liste gia' sullo schermo. Ora al suo posto c'e'
   subito un riquadro tenue della stessa misura, e la scheda vi compare dentro. Se oggi non c'e', il riquadro
   si chiude (vado-oggi.js, oggi.js: .vado-oggi-assente). */
:is(#spiaggiaOggi,#postoOggi)[hidden]:not(.vado-oggi-assente){display:block!important;min-height:300px;border-radius:20px;
  background:rgba(127,127,127,.07)}
@media (max-width:760px){#spiaggiaOggi[hidden]:not(.vado-oggi-assente){min-height:470px}#postoOggi[hidden]:not(.vado-oggi-assente){min-height:398px}}
:is(#spiaggiaOggi,#postoOggi):not([hidden])>*{animation:vado-oggi-entra .7s cubic-bezier(.16,1,.3,1) both}
@keyframes vado-oggi-entra{from{opacity:0}to{opacity:1}}

/* LA BARRA DEL CONTO HA SUBITO LA SUA MISURA (20 ottobre 2026, Alessio: «il badge cliccabile, dopo il login,
   si sposta verso sinistra»). All'apertura c'e' solo il conto; tema e lingua li aggiungono gli script poco
   dopo (+101 pixel) e tutto scivolava. Ora lo spazio finale e' tenuto da subito: 133 pixel (tondo del conto,
   tema, lingua), 249 per chi non e' entrato su schermo largo (pillola «Accedi», tema, lingua). Il conto sta
   gia' nel punto dove restera': a sinistra se viene prima, a destra se viene dopo. */
html.grafica .barra-conto{min-width:133px;justify-content:flex-start}
/* la lingua sta gia' all'estremo destro: il tema che arriva dopo entra nel mezzo senza spingerla */
html.grafica .barra-conto .lingua-scelta{margin-left:auto}
@media (min-width:621px){html.grafica:not(.vado-dentro) .barra-conto .lingua-scelta{margin-left:0}}
@media (min-width:621px){html.grafica:not(.vado-dentro) .barra-conto{min-width:249px;justify-content:flex-end}}

/* Il posto della barra dei siti, gia' nel foglio della testa (20 ottobre 2026): vado-dati.js lo riserva
   anche lui, ma nelle pagine regione della montagna arriva in fondo alla pagina e il contenuto saltava giu'
   di 41 pixel quando la barra compariva. */
body:not(:has(>#vado-portali))::before{content:'';display:block;height:41px;box-sizing:border-box;background:#f5f5f7;border-bottom:1px solid #e2e2e7}
html[data-tema='scuro'] body:not(:has(>#vado-portali))::before{background:#111113;border-color:#2c2c2e}
@media (prefers-color-scheme:dark){html:not([data-tema='chiaro']) body:not(:has(>#vado-portali))::before{background:#111113;border-color:#2c2c2e}}
@media print{body::before{display:none!important}}

/* la fascia dei cookie (la prima volta) sale dal fondo invece di comparire di colpo (20 ottobre 2026) */
.ck{animation:vado-ck-entra .6s cubic-bezier(.16,1,.3,1) both}
@keyframes vado-ck-entra{from{opacity:0;transform:translate3d(0,24px,0)}to{opacity:1;transform:none}}

/* Nelle pagine regione della montagna il conto arriva dopo dentro la testata e la ricomponeva (andava a
   capo, tutto scendeva di 49 pixel): il suo posto e' tenuto da subito, della misura finale (20 ottobre 2026) */
html:not(.vado-dentro) .testata>#conto:empty{min-width:249px;min-height:33px}
html.vado-dentro .testata>#conto:empty{min-width:133px;min-height:32px}
/* la fila delle zone sopra la carta delle regioni (mare e montagna) la riempie lo script: vuota era alta 26
   pixel, piena 56, e la carta scendeva di 30 quando arrivavano i pulsanti. Il posto pieno e' tenuto da subito. */
#zone.zone:empty{box-sizing:border-box;min-height:56px}