/* APParcheggio - stile dell'app (prima era dentro index.html) */
:root{
  --bg:#FFFFFF; --bg-2:#F3F5F8; --linea:#E1E6ED; --testo:#15202B; --testo-2:#5B6877; --testo-3:#8A96A3;
  --tur:#00A3B4; --blu:#1E6BFF; --blu-chiaro:#E8F0FF; --verde:#0FA968; --verde-chiaro:#E4F7EE; --giallo:#F2A900; --rosso:#E0413A;
  --ombra:0 6px 24px rgba(21,32,43,.16); --r:16px;
  --display:"Barlow Condensed","Arial Narrow",system-ui,sans-serif;
  --sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  color-scheme:light;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html,body{height:100%;margin:0;overflow:hidden}
body{background:var(--bg);color:var(--testo);font:15px/1.45 var(--sans)}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid rgba(30,107,255,.45);outline-offset:2px}
.marchio{font:800 26px/1 var(--display);letter-spacing:.01em}
.marchio b{color:var(--blu)}

/* ---------- ACCESSO ---------- */
#accesso{position:fixed;inset:0;overflow:auto;background:linear-gradient(180deg,#F3F7FF 0,#fff 45%);padding:calc(28px + env(safe-area-inset-top,0px)) 20px calc(28px + env(safe-area-inset-bottom,0px))}
.acc-box{max-width:440px;margin:0 auto;display:flex;flex-direction:column;gap:18px}
.logo{display:flex;align-items:center;gap:12px}
.logo i{width:48px;height:48px;border-radius:14px;background:var(--blu);color:#fff;display:grid;place-items:center;font:800 30px/1 var(--display);font-style:normal;box-shadow:0 8px 20px rgba(30,107,255,.35)}
.logo p{margin:2px 0 0;color:var(--testo-2);font-size:13px}
.traffico-chip.live::after{content:"LIVE";font:800 9px/1 var(--sans);color:#fff;background:#E53935;border-radius:4px;padding:2px 3px;margin-left:4px;letter-spacing:.04em}
.cambia-pw summary{cursor:pointer;font-weight:600;color:var(--blu);font-size:14px;padding:4px 0}
.logo p.slogan{font-size:15px;font-weight:600;font-style:italic;color:var(--testo)}.slogan b{color:var(--blu)}
.seg{display:flex;background:var(--bg-2);border-radius:12px;padding:4px}
.seg button{flex:1;border:0;background:none;padding:10px;border-radius:9px;font-weight:600;color:var(--testo-2)}
.seg button[aria-pressed="true"]{background:#fff;color:var(--testo);box-shadow:0 1px 4px rgba(0,0,0,.08)}
.form{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pieno{grid-column:1/-1}
.campo{display:flex;flex-direction:column;gap:6px}
.campo>span,.etichetta{font-size:12.5px;font-weight:600;color:var(--testo-2)}
.campo input,.campo select{border:1.5px solid var(--linea);border-radius:12px;padding:12px;background:#fff;width:100%}
.campo input:focus,.campo select:focus{border-color:var(--blu);outline:0}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips label{display:flex;align-items:center;gap:8px;border:1.5px solid var(--linea);border-radius:999px;padding:8px 13px;font-size:14px;cursor:pointer;background:#fff}
.chips input{position:absolute;opacity:0;pointer-events:none}
.chips label:has(input:checked){border-color:var(--blu);background:var(--blu-chiaro);color:#0B4BC4;font-weight:600}
.chips label:has(input:focus-visible){outline:3px solid rgba(30,107,255,.45)}
.consenso{display:flex;gap:10px;font-size:13px;color:var(--testo-2)}
.consenso input{width:18px;height:18px;accent-color:var(--blu);flex:none;margin-top:1px}
.btn{border:0;border-radius:14px;padding:14px 18px;font-weight:700;font-size:15.5px;background:var(--blu);color:#fff;display:flex;align-items:center;justify-content:center;gap:8px;width:100%}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.sec{background:var(--bg-2);color:var(--testo)}
.btn.verde{background:var(--verde)}
.btn.link{background:none;color:var(--blu);padding:8px}
.esito{border-radius:12px;padding:11px 13px;font-size:14px}
.esito.ok{background:var(--verde-chiaro);color:#0A6B43}
.esito.no{background:#FDECEB;color:#A42A24}
.esito.info{background:var(--bg-2);color:var(--testo-2)}
.codice-input{font:500 30px/1 var(--mono)!important;letter-spacing:.45em;text-align:center;text-transform:uppercase;padding:16px 8px!important}

/* ---------- APP ---------- */
#app{position:fixed;inset:0}
#scena{position:absolute;inset:0;overflow:hidden;background:#E9EEF3;touch-action:none;overscroll-behavior:contain;-webkit-user-select:none;user-select:none;isolation:isolate}
#scena.tre-d{perspective:1100px;perspective-origin:50% 34%;background:linear-gradient(180deg,#C7DDF2 0,#E1EBF4 26%,#EDF1F5 70%)}
#inclina{position:absolute;inset:0;transform-origin:50% 72%;transition:transform .68s cubic-bezier(.22,.75,.2,1)}
body.inclinando-gesto #inclina{transition-duration:.08s;transition-timing-function:linear}
#ruota{position:absolute;left:0;top:0;width:100%;height:100%;will-change:transform;transform:translateZ(0)}
#mappa,.leaflet-container{position:absolute;inset:0;background:#E9EEF3}
#mappa-mapbox-nativa{position:absolute;inset:0;display:none;background:#E9EEF3}
#mappa-mapbox-nativa .mapbox-pin-nativo{transform:none;rotate:none}
/* Nella mappa Chiara il fondo MapLibre e i pin/overlay Leaflet condividono
   la vista: niente trasformazioni CSS intermedie durante gli zoom rapidi. */
body.mappa-chiara-attiva #mappa .leaflet-zoom-animated{transition:none!important}
#mappa-mapbox-nativa .mapbox-pin-nativo[data-gps]{display:grid;place-items:center;margin:0!important}
#mappa-mapbox-nativa .mapbox-pin-nativo[data-gps] .me-wrap{position:absolute;left:50%;top:50%}
/* Quando il GLB è attivo resta cliccabile il pin GPS, ma la freccia non deve coprire l'auto. */
body.auto3d-modello-attivo #mappa-mapbox-nativa .mapbox-pin-nativo[data-gps].auto3d-freccia-nascosta{opacity:0!important}
body.auto3d-modello-attivo #mappa .leaflet-marker-icon .me-wrap{opacity:0!important}
body.mapbox-nativa-attiva #inclina{transform:none!important}
body.mapbox-nativa-attiva #ruota{left:0!important;top:0!important;width:100%!important;height:100%!important;transform:none!important}
body.mapbox-nativa-attiva #attrib{display:none}
.leaflet-container{outline:0;overflow:hidden}
.base-strade{filter:saturate(.88) contrast(1.045) brightness(1.015)}
.base-osm{filter:saturate(.82) contrast(1.035)}
.base-sat{filter:saturate(.92) contrast(1.045)}
.leaflet-tile{backface-visibility:hidden;-webkit-backface-visibility:hidden}
/* con la mappa ruotata i segnaposto restano dritti */
.leaflet-marker-icon>:not(.me-wrap){rotate:var(--controrot,0deg)}
.pin{transform-origin:26px 58px}
.attrib{position:absolute;z-index:400;right:4px;bottom:2px;font-size:9px;color:rgba(0,0,0,.55);background:rgba(255,255,255,.6);padding:0 4px;border-radius:4px;pointer-events:none}
.ruota-ctrl{position:absolute;z-index:540;right:12px;top:calc(124px + env(safe-area-inset-top,0px));display:flex;flex-direction:column;gap:6px;align-items:center}
.bussola{width:44px;height:44px;border-radius:50%;border:0;background:#fff;box-shadow:var(--ombra);position:relative;cursor:pointer;padding:0}
.bussola svg{width:34px;height:34px}
.bussola span{position:absolute;left:50%;top:1px;transform:translateX(-50%);font:800 8px/1 var(--sans);color:#E53935}
.zoom-mappa{display:flex;flex-direction:column;overflow:hidden;border-radius:14px;background:rgba(255,255,255,.92);box-shadow:var(--ombra);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.zoom-mappa button{width:42px;height:42px;border:0;background:transparent;color:#30343A;font:500 27px/1 var(--sans);cursor:pointer;touch-action:manipulation}
.zoom-mappa button{min-width:46px;min-height:46px;transition:background .14s ease,transform .14s ease}
.zoom-mappa button:active{transform:scale(.94)}
.zoom-mappa button+button{border-top:1px solid rgba(60,60,67,.14)}
.zoom-mappa button:active{background:rgba(0,122,255,.10)}
.zoom-mappa button:disabled{color:#AEB4BC;cursor:default}
.ruota-btn{width:34px;height:34px;border-radius:50%;border:0;background:rgba(255,255,255,.95);box-shadow:var(--ombra);font-size:17px;line-height:1;cursor:pointer;color:var(--testo-2)}
/* in navigazione: in basso a destra, sopra la barra delle indicazioni, così non copre i tasti di lato */
body.navigando .ruota-ctrl{left:auto;right:10px;top:auto;bottom:calc(122px + env(safe-area-inset-bottom,0px))}
/* schermi bassi: lo zoom doppione sparisce (c'è già quello nei tasti di lato), resta la bussola */
@media (max-height:800px){body.navigando .ruota-ctrl .zoom-mappa{display:none}}
body.navigando .ruota-btn{display:none}
.leaflet-control-attribution{font-size:9.5px!important}
.top{position:absolute;z-index:500;left:12px;right:12px;top:calc(10px + env(safe-area-inset-top,0px));display:flex;gap:8px;align-items:center;pointer-events:none}
.pillola{pointer-events:auto;white-space:nowrap;flex:none;background:#fff;border-radius:999px;box-shadow:var(--ombra);padding:9px 14px;display:flex;align-items:center;gap:8px;font-weight:600;font-size:14px;border:0}
.pillola .marchio{font-size:18px}
.top{gap:6px}.top .pillola{padding:8px 12px}
@media (max-width:380px){.pillola .marchio{font-size:16px}.traffico-chip #tr-txt{display:none}}
.spazio{flex:1}
.punti-mini{font-variant-numeric:tabular-nums}
.punti-mini .barra{width:30px;height:6px;border-radius:3px;background:var(--bg-2);overflow:hidden}
.punti-mini .barra i{display:block;height:100%;background:var(--verde)}
.traffico-chip{font-size:12.5px;padding:7px 11px}
.traffico-chip.attivo{outline:2.5px solid var(--blu)}
.ico-griglia{width:22px;height:22px;display:block}
.ico-strada{width:22px;height:22px;display:none}
.traffico-chip.attivo .ico-griglia{display:none}.traffico-chip.attivo .ico-strada{display:block}
.ricordami{margin-top:-2px}
.traffico-chip{padding:9px 11px!important}
.dot{width:9px;height:9px;border-radius:50%}
.fab-col{position:absolute;z-index:500;right:12px;display:flex;flex-direction:column;gap:10px}
.fab{width:46px;height:46px;border-radius:50%;background:#fff;border:0;box-shadow:var(--ombra);display:grid;place-items:center}
.pin-ultimo-preso{width:38px;height:38px;border:3px solid #fff;border-radius:50%;background:#1769D2;color:#fff;box-shadow:0 3px 12px #102a4380;display:grid;place-items:center;font:800 15px var(--sans)}
.fab.vista-gl{font:800 12px var(--sans);color:var(--blu);letter-spacing:-.2px}
.fab svg{width:22px;height:22px}
.campana{color:var(--testo-3)}
.campana-wrap{position:relative}
.pop-avvisi{position:absolute;right:58px;top:-6px;width:230px;background:#fff;border-radius:16px;box-shadow:var(--ombra);padding:12px 14px;display:flex;flex-direction:column;gap:6px}
.pop-avvisi::after{content:"";position:absolute;right:-7px;top:22px;border:7px solid transparent;border-left-color:#fff;border-right:0}
.pop-top{display:flex;justify-content:space-between;align-items:baseline;font-size:14px}
.pop-handle{width:36px;height:5px;border-radius:5px;background:#CBD2DB;align-self:center;margin:-3px auto 3px;cursor:grab;touch-action:none}
.pop-top span{font:700 17px var(--sans);color:var(--blu);font-variant-numeric:tabular-nums;white-space:nowrap;margin-left:8px}
.pop-avvisi input[type=range]{width:100%;accent-color:var(--blu);height:28px;margin:0}
.pop-scala{display:flex;justify-content:space-between;font-size:11px;color:var(--testo-3);margin-top:-4px}
.pop-strati{width:auto;padding:8px;gap:4px;top:auto;bottom:-4px}
.pop-strati::after{top:auto!important;bottom:20px}
.pop-strati button{display:flex;align-items:center;gap:10px;border:0;background:none;padding:8px 10px;border-radius:10px;font:600 14px var(--sans);color:var(--testo);white-space:nowrap;cursor:pointer;text-align:left}
.pop-strati button i{width:30px;height:30px;border-radius:8px;flex:none;border:1px solid rgba(0,0,0,.08)}
.pop-strati button[aria-pressed=true]{background:#EAF1FF;color:var(--blu)}
.pop-strati button[aria-pressed=true] i{outline:2px solid var(--blu);outline-offset:1px}
.riga-live{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 10px;border-bottom:1px solid #EEF1F5;margin-bottom:2px;order:-1}
.riga-live span{display:flex;flex-direction:column;font-size:14px;white-space:nowrap}.riga-live small{font-size:11px;color:var(--testo-3)}
.riga-live input{appearance:none;width:42px;height:24px;border-radius:12px;background:#CBD2DB;position:relative;flex:none;cursor:pointer;transition:background .15s}
.riga-live input::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:left .15s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.riga-live input:checked{background:#E53935}.riga-live input:checked::after{left:21px}
.riga-terreno input:checked{background:var(--blu)}
.riga-terreno input:disabled{opacity:.55;cursor:wait}
.riga-terreno input:focus-visible{outline:2px solid var(--blu);outline-offset:3px}
.riga-terreno small{white-space:normal;max-width:210px}
.pop-strati{flex-direction:column}
.nav-strati{position:absolute;z-index:700;right:66px;top:calc(160px + env(safe-area-inset-top,0px));bottom:auto;max-width:min(250px,calc(100vw - 90px))}
.pop-azioni{display:flex;justify-content:space-between;gap:8px;padding-top:4px}
.pop-spegni,.pop-prova{white-space:nowrap;border:0;background:none;font-weight:600;font-size:13px;padding:4px 0;cursor:pointer}
.pop-spegni{color:var(--rosso)}.pop-prova{color:var(--blu)}
.campana[aria-pressed="true"]{background:var(--blu);color:#fff}
.cerca{color:var(--testo-3)}
.cerca[aria-pressed="true"]{background:var(--tur);color:#fff}
.cerca[aria-pressed="true"] .barra-off{display:none}
.pop-cerca .pop-top span{color:var(--tur)}
.pop-cerca input[type=range]{accent-color:var(--tur)}
.campana[aria-pressed="true"] .barra-off{display:none}

/* bottom sheet */
.sheet{position:absolute;z-index:600;left:0;right:0;bottom:0;background:#fff;border-radius:20px 20px 0 0;box-shadow:0 -6px 28px rgba(21,32,43,.18);padding:8px 16px calc(16px + env(safe-area-inset-bottom,0px));max-height:78%;overflow:auto;display:flex;flex-direction:column;gap:14px;max-width:560px;margin:0 auto}
.maniglia{width:40px;height:5px;border-radius:3px;background:var(--linea);margin:2px auto 0}
.sheet h2{margin:0;font:700 19px/1.2 var(--sans)}
.sheet-top{display:flex;align-items:center;gap:10px}
.sheet-top h2{flex:1}
.chiudi{border:0;background:var(--bg-2);width:34px;height:34px;border-radius:50%;font-size:18px;line-height:1}
.azioni{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.barra-home{position:absolute;z-index:600;left:12px;right:12px;bottom:calc(18px + env(safe-area-inset-bottom,0px));display:flex;align-items:flex-end;justify-content:space-between;pointer-events:none}
.barra-home>*{pointer-events:auto}
.chip-posti{border:0;background:#fff;border-radius:999px;box-shadow:var(--ombra);padding:11px 16px;font-weight:700;font-size:14.5px;display:flex;align-items:center;gap:8px}
.fab-piu{width:62px;height:62px;border-radius:50%;border:0;background:var(--blu);color:#fff;box-shadow:0 8px 22px rgba(30,107,255,.45);display:grid;place-items:center;transition:transform .2s}
.fab-piu svg{width:28px;height:28px}
.fab-piu[aria-expanded="true"]{transform:rotate(45deg);background:var(--testo)}
.menu-azioni{position:absolute;right:0;bottom:74px;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.az{border:0;border-radius:999px;padding:12px 18px 12px 14px;display:flex;align-items:center;gap:10px;font-weight:700;font-size:15px;color:#fff;box-shadow:var(--ombra);white-space:nowrap}
.az svg{width:22px;height:22px}
.az.foto{background:var(--blu)}.az.libera{background:var(--verde)}
@media (prefers-reduced-motion:reduce){.fab-piu{transition:none}}
.azione{border:0;border-radius:16px;padding:14px 12px;display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left;font-weight:700;font-size:15px}
.azione small{font-weight:500;font-size:12.5px;opacity:.85}
.azione svg{width:26px;height:26px}
.azione.foto{background:var(--blu);color:#fff}
.azione.libera{background:var(--verde);color:#fff}
.riassunto{display:flex;align-items:center;justify-content:space-between;gap:10px}
.riassunto b{font-size:16px}
.filtro{font-size:13px;display:flex;align-items:center;gap:6px;color:var(--testo-2)}
.filtro input{accent-color:var(--blu);width:16px;height:16px}
.lista{display:flex;flex-direction:column;gap:8px}
.posto{display:flex;gap:12px;align-items:center;border:1.5px solid var(--linea);border-radius:14px;padding:8px;background:#fff;text-align:left;width:100%}
.posto .ph{width:64px;height:52px;border-radius:10px;background:var(--bg-2) center/cover no-repeat;flex:none;display:grid;place-items:center;color:var(--testo-3)}
.posto .t{flex:1;min-width:0}
.posto .t b{display:block;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.posto .t span{font-size:12.5px;color:var(--testo-2)}
.tempo{font:500 13px var(--mono);padding:4px 8px;border-radius:8px;flex:none}
.tempo.v{background:var(--verde-chiaro);color:#0A6B43}
.tempo.g{background:#FFF4D6;color:#8A6100}
.tempo.r{background:#FDE7E8;color:#B0232A}
.vuoto{color:var(--testo-3);font-size:14px;text-align:center;padding:8px}

/* dettaglio */
.foto-grande{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px;background:var(--bg-2)}
.info-griglia{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.info{background:var(--bg-2);border-radius:12px;padding:9px 11px}
.info span{display:block;font-size:11.5px;color:var(--testo-2);font-weight:600}
.info b{font-size:14px}
.gps-box{display:flex;align-items:center;gap:10px;background:var(--bg-2);border-radius:12px;padding:10px 12px;font-size:13.5px}
.gps-box .dot{flex:none}
.passo{font-size:12px;font-weight:700;color:var(--blu);letter-spacing:.06em;text-transform:uppercase}
.file-btn{display:flex;align-items:center;justify-content:center;gap:10px;border:2px dashed #BFCBDA;border-radius:14px;padding:16px;cursor:pointer;color:var(--testo-2);font-weight:600}
.file-btn input{display:none}
.anteprima{width:100%;max-height:200px;object-fit:cover;border-radius:12px}
.sheet.compatto{max-height:min(68vh,680px);gap:12px;padding-top:7px}
#s-segnala .sheet-top,#s-segnala .sg-passaggi,#s-segnala .scelte-riga,#s-segnala .riga-foto{animation:segnala-entra .32s cubic-bezier(.2,.75,.25,1) both}
#s-segnala .sg-passaggi{animation-delay:.035s}#s-segnala .scelte-riga{animation-delay:.07s}#s-segnala .riga-foto{animation-delay:.11s}
@keyframes segnala-entra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.sg-passaggi{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:0 0 1px}
.sg-passaggio{min-width:0;display:flex;align-items:center;gap:6px;padding:7px 8px;border-radius:11px;background:#F2F4F7;color:#818A98;transition:background .2s,color .2s,transform .2s}
.sg-passaggio i{width:20px;height:20px;display:grid;place-items:center;border-radius:50%;background:#DDE2E9;color:#657080;font:750 11px/1 var(--sans);font-style:normal;flex:none;transition:background .2s,color .2s,transform .2s}
.sg-passaggio b{font-size:11px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sg-passaggio.attivo{background:#EAF3FF;color:#0758D6}.sg-passaggio.attivo i{background:#1687FF;color:#fff;transform:scale(1.06)}
.sg-passaggio.completo{background:#EAF7F0;color:#18794E}.sg-passaggio.completo i{background:#28A66A;color:#fff}
.sheet.compatto h2{font-size:17px}
.maniglia-btn{border:0;background:none;padding:6px 0 2px;margin:-6px 0 -4px;width:100%;cursor:pointer}
.maniglia-btn .maniglia{display:block}
.sheet.ridotto>*:not(.maniglia-btn):not(.sheet-top){display:none!important}
.sheet.ridotto{gap:4px}
.gps-pill{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--testo-2);background:var(--bg-2);border-radius:999px;padding:5px 10px;white-space:nowrap;max-width:48%;overflow:hidden;text-overflow:ellipsis}
.btn.mini{padding:8px 12px;font-size:13px;font-weight:600}
#e-acc2,#e-reg{grid-column:1/-1}
.scelte-riga{display:flex;flex-wrap:nowrap;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 16px}
.scelte-riga::-webkit-scrollbar{display:none}
.scelte-riga .seg-mini{padding:2px}
.scelte-riga .seg-mini span{padding:6px 7px;font-size:12.5px}
.gruppo{display:flex;flex-direction:column;gap:4px}
.mini-et{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--testo-3)}
.scorri{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 16px}
.scorri::-webkit-scrollbar{display:none}
.seg-mini{display:flex;background:var(--bg-2);border-radius:10px;padding:3px;flex:none}
.seg-mini label{cursor:pointer}
.seg-mini input{position:absolute;opacity:0;pointer-events:none}
.seg-mini span{display:block;padding:7px 11px;border-radius:8px;font-size:13.5px;font-weight:600;color:var(--testo-2);white-space:nowrap}
.seg-mini input:checked+span{background:#fff;color:var(--testo);box-shadow:0 1px 4px rgba(0,0,0,.12)}
.seg-mini input:focus-visible+span{outline:3px solid rgba(30,107,255,.45)}
.riga-foto{display:flex;gap:10px;align-items:stretch}
.foto-btn{flex:none;width:76px;min-height:52px;border:2px dashed #BFCBDA;border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:pointer;color:var(--testo-2);font-size:12px;font-weight:600;overflow:hidden;position:relative}
.foto-btn input{display:none}
.foto-btn img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.foto-btn.fatta{border-style:solid;border-color:var(--verde);box-shadow:0 0 0 3px rgba(40,166,106,.12)}
.foto-btn.fatta img{animation:foto-selezionata .28s cubic-bezier(.2,.8,.2,1)}
@keyframes foto-selezionata{from{opacity:.35;transform:scale(1.04)}to{opacity:1;transform:scale(1)}}
.foto-btn.fatta span{position:relative;background:rgba(0,0,0,.55);color:#fff;border-radius:6px;padding:1px 6px;margin-top:auto;margin-bottom:4px}
.riga-foto .btn{flex:1}
#sg-invia.invio{display:flex;align-items:center;justify-content:center;gap:8px}
#sg-invia.invio::before{content:"";width:15px;height:15px;border:2px solid rgba(255,255,255,.55);border-top-color:#fff;border-radius:50%;animation:segnala-gira .7s linear infinite}
@keyframes segnala-gira{to{transform:rotate(360deg)}}
details.via summary{font-size:13px;color:var(--blu);cursor:pointer;font-weight:600}
details.via input{margin-top:8px;border:1.5px solid var(--linea);border-radius:12px;padding:10px;width:100%}

/* profilo */
.prog{height:12px;border-radius:6px;background:var(--bg-2);overflow:hidden}
.prog i{display:block;height:100%;background:linear-gradient(90deg,var(--verde),#34D399)}
.avvisi{border:1.5px solid var(--linea);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:10px}
.avvisi-top{display:flex;gap:12px;align-items:center;justify-content:space-between}
.interruttore{flex:none;width:50px;height:30px;border-radius:15px;border:0;background:#CBD3DD;position:relative;transition:background .2s}
.interruttore i{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:left .2s}
.interruttore[aria-checked="true"]{background:var(--verde)}
.interruttore[aria-checked="true"] i{left:23px}
.buono{border:2px dashed var(--verde);border-radius:14px;padding:12px;display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--verde-chiaro)}
.buono b{font:500 16px var(--mono)}
.partner-box{display:flex;align-items:center;gap:12px;border:1.5px solid;border-radius:14px;padding:10px 12px}
.partner-logo{width:40px;height:40px;border-radius:10px;color:#fff;display:grid;place-items:center;font:800 20px/1 var(--display);flex:none}
.partner-t{display:flex;flex-direction:column;min-width:0}
.partner-t small{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--testo-3);font-weight:700}
.partner-t b{font-size:15px}
.partner-t span{font-size:12.5px;color:var(--testo-2)}
.classifica{display:flex;flex-direction:column;gap:4px;font-size:14px}
.classifica div{display:flex;justify-content:space-between;padding:6px 2px;border-bottom:1px solid var(--linea)}
.gioco-settimana,.gioco-card{border:1px solid var(--linea);border-radius:12px;padding:10px 12px}
.gioco-settimana p,.gioco-card p{margin:7px 0 0}
.sfida+.sfida{margin-top:12px}
.contributi{display:flex;flex-direction:column;gap:7px}
.contributo-riga{display:flex;align-items:flex-start;gap:9px;border-bottom:1px solid var(--linea);padding:7px 2px;font-size:12.5px}
.contributo-icona{flex:none}
.contributo-dettaglio{display:flex;flex:1;flex-direction:column;gap:3px}
.contributo-data{font-size:11px;color:var(--testo-3)}
.distintivi{display:grid;gap:10px;margin-top:8px}
.distintivo-item{border:1px solid var(--linea);border-radius:10px;padding:8px 10px}
.distintivo-riga{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12.5px}
.distintivo-riga b{font-variant-numeric:tabular-nums;color:var(--testo-2);white-space:nowrap}
.distintivo-item.sbloccato{background:var(--verde-chiaro);border-color:var(--verde)}
.distintivo-item.sbloccato .distintivo-riga b{color:var(--verde)}
.gioco-progresso{height:7px;border-radius:99px;background:var(--linea);overflow:hidden;margin-top:7px}
.gioco-progresso i{display:block;width:0;height:100%;background:var(--blu);border-radius:inherit;transition:width .25s ease}
.distintivo-item.sbloccato .gioco-progresso i{background:var(--verde)}
.nota{font-size:12.5px;color:var(--testo-3)}

/* marker */
.pin{position:relative;width:52px;height:52px;margin:-58px 0 0 -26px}
.pin .c{width:52px;height:52px;border-radius:50%;border:4px solid var(--c);background:#fff center/cover no-repeat;box-shadow:0 4px 12px rgba(0,0,0,.3);display:grid;place-items:center}
.pin .c svg{width:26px;height:26px;color:var(--c)}
.pin::after{content:"";position:absolute;left:50%;bottom:-8px;margin-left:-7px;border:7px solid transparent;border-top-color:var(--c);border-bottom:0}
.pin .onda{position:absolute;inset:0;border-radius:50%;border:3px solid var(--c);animation:onda 1.8s ease-out infinite}
@keyframes onda{from{transform:scale(1);opacity:.8}to{transform:scale(1.8);opacity:0}}
/* barra di ricerca luoghi */
.cerca-barra{position:absolute;z-index:560;left:12px;right:12px;top:calc(66px + env(safe-area-inset-top,0px));height:46px;background:#fff;border-radius:14px;box-shadow:var(--ombra);display:flex;align-items:center;gap:8px;padding:0 6px 0 12px;margin:0}
/* mentre si scrive (suggerimenti aperti) la ricerca sta sopra legende, schedina e finestrelle */
.cerca-barra:focus-within{z-index:620}
@media (min-width:700px){.cerca-barra{right:auto;width:420px}.ruota-ctrl{top:calc(66px + env(safe-area-inset-top,0px))}}
.sfumatura{image-rendering:auto;filter:blur(1.3px) saturate(1.05);opacity:.85;transform:translateZ(0);backface-visibility:hidden;mix-blend-mode:multiply}
/* Evita sottili fessure tra tessere Leaflet durante zoom e cambio layer. */
.leaflet-tile{outline:1px solid transparent}
body.navigando .legenda-tr{display:none}
.cerca-barra>svg{width:20px;height:20px;color:var(--testo-3);flex:none}
.cerca-barra input{flex:1;border:0;outline:0;font:500 15.5px var(--sans);background:none;min-width:0;padding:0;height:100%;color:var(--testo)}
.cerca-barra input::-webkit-search-cancel-button{display:none}
#q-via{border:0;background:#EEF1F5;width:30px;height:30px;border-radius:50%;font-size:18px;line-height:1;color:var(--testo-2);cursor:pointer;flex:none}
.sugg{position:absolute;left:0;right:0;top:52px;background:#fff;border-radius:14px;box-shadow:0 10px 30px rgba(20,30,50,.25);overflow:hidden;max-height:min(60vh,420px);overflow-y:auto}
.sugg button{display:flex;gap:10px;align-items:center;width:100%;border:0;background:none;text-align:left;padding:10px 12px;border-bottom:1px solid #F0F2F5;cursor:pointer;font:inherit;color:inherit}
.sugg button:hover,.sugg button.sel{background:#F2FBFC}
.sugg i{width:32px;height:32px;border-radius:50%;background:#E6F7F9;color:var(--tur);display:grid;place-items:center;flex:none;font-style:normal;font-size:15px}
.sugg .t{display:flex;flex-direction:column;min-width:0}.sugg .t b{font-size:14.5px;font-weight:600}.sugg .t b mark{background:none;color:var(--tur);font-weight:800}
.sugg .t span{font-size:12px;color:var(--testo-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sugg .nota-s{padding:9px 12px;font-size:12px;color:var(--testo-3);background:#FAFBFC}
.bandierina{margin:-40px 0 0 -6px;font-size:30px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.35))}
/* finestra "il posto migliore vicino a…" */
.meta-pop{position:absolute;z-index:700;left:10px;right:10px;bottom:calc(14px + env(safe-area-inset-bottom,0px));background:#fff;border-radius:20px;box-shadow:0 14px 40px rgba(20,30,50,.35);padding:14px 16px 12px;animation:sale .3s cubic-bezier(.2,1.2,.4,1)}
.scelta-punto-pop{position:absolute;z-index:710;left:12px;right:12px;bottom:calc(16px + env(safe-area-inset-bottom,0px));padding:17px;background:rgba(255,255,255,.97);border:1px solid rgba(255,255,255,.92);border-radius:24px;box-shadow:0 18px 48px rgba(20,30,50,.3);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);animation:sale .28s cubic-bezier(.2,1.2,.4,1)}
.scelta-punto-testa{display:flex;justify-content:space-between;align-items:center;gap:12px}.scelta-punto-pop h3{font-size:20px;line-height:1.2;letter-spacing:-.025em;margin:9px 0 5px}.scelta-punto-pop p{font-size:13px;line-height:1.4;color:var(--testo-2);margin:0 0 12px}.scelta-punto-scheda{display:grid;gap:3px;margin:0 0 12px;padding:11px 13px;border:1px solid rgba(0,122,255,.15);border-radius:15px;background:linear-gradient(135deg,rgba(0,122,255,.075),rgba(48,164,108,.07))}.scelta-punto-scheda span{font-size:10px;font-weight:800;letter-spacing:.08em;color:#0875DE}.scelta-punto-scheda b{font-size:14px;line-height:1.25}.scelta-punto-scheda small{font-size:12px;line-height:1.35;color:var(--testo-2)}.scelta-punto-azioni{display:grid;gap:8px}.scelta-punto-azioni .btn{min-height:48px}.scelta-punto-azioni .sec{background:#F2F2F7;color:var(--blu);box-shadow:none}
@keyframes sale{from{transform:translateY(30px);opacity:0}to{transform:none;opacity:1}}
.mp-testa{display:flex;justify-content:space-between;align-items:center}
.mp-occhiello{background:var(--tur);color:#fff;font:800 10.5px/1 var(--sans);letter-spacing:.05em;padding:5px 7px;border-radius:7px}
.mp-x{border:0;background:#EEF1F5;width:30px;height:30px;border-radius:50%;font-size:18px;cursor:pointer}
.meta-pop h3{margin:8px 0 10px;font-size:18px;line-height:1.25}
.mp-count{margin:-5px 0 10px;color:var(--testo-2);font:600 12.5px/1.35 var(--sans)}
.mp-testa,#mp-titolo,.sheet-top,.maniglia,.maniglia-btn,.pop-handle,.aggancio .ft{touch-action:none}
.mp-corpo{display:flex;gap:12px}
.mp-photo-details{width:90px;flex:none;align-self:flex-start;border-radius:14px;background:#F1F3F6;overflow:hidden}
.mp-photo-details summary{list-style:none;cursor:pointer;text-align:center;font:700 11px/1.2 var(--sans);color:var(--testo-2)}
.mp-photo-details summary::-webkit-details-marker,.foto-disclosure summary::-webkit-details-marker{display:none}
.mp-photo-thumb{display:grid;place-items:center;width:90px;height:62px;background:#E8ECF2 center/contain no-repeat;color:var(--testo-3)}
.mp-photo-thumb svg{width:25px;height:25px}
.mp-photo-label{display:block;padding:5px 2px 7px}
.mp-corpo.foto-aperta{display:block}
.mp-corpo.foto-aperta .mp-photo-details{width:100%;margin-bottom:10px}
.mp-corpo.foto-aperta .mp-photo-details summary{display:flex;align-items:center;gap:9px;text-align:left;padding:6px 8px}
.mp-corpo.foto-aperta .mp-photo-thumb{width:54px;height:42px;flex:none;border-radius:8px}
.mp-corpo.foto-aperta .mp-photo-label{padding:0}
.mp-photo-full{display:block;width:100%;height:auto;max-height:30vh;object-fit:contain;background:#EEF1F5;border-radius:10px;margin-top:8px}
.mp-info{display:flex;flex-direction:column;gap:2px;min-width:0}.mp-info b{font-size:15px}.mp-info>span{font-size:13px;color:var(--testo-2)}
.mp-righe{display:flex;flex-direction:column;gap:3px;margin-top:6px;font-size:13.5px}
.mp-righe span:nth-child(3){color:var(--verde);font-weight:700}
.mp-avviso{color:#C0392B!important;font-weight:700;font-size:12.5px!important}
.mp-vuoto{margin:0 0 6px;color:var(--testo-2)}
.mp-bottoni{display:grid;grid-template-columns:1.4fr 1fr;gap:8px;margin-top:12px}
#mp-si{background:var(--tur);font-size:17px}
.mp-carousel{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:8px}
.mp-carousel button{border:0;border-radius:999px;background:#EEF1F5;color:var(--testo);width:38px;height:36px;font-size:21px;font-weight:700;cursor:pointer;touch-action:manipulation}
.mp-carousel button:disabled{opacity:.35;cursor:default}
.mp-carousel span{min-width:52px;text-align:center;font:700 12px var(--sans);color:var(--testo-2)}
.foto-disclosure{margin:0 0 12px}
.foto-disclosure summary{display:flex;align-items:center;gap:10px;min-height:54px;padding:6px 10px;border-radius:14px;background:var(--bg-2);cursor:pointer;list-style:none;font:650 14px var(--sans);color:var(--testo)}
.foto-disclosure .foto-mini{width:54px;height:42px;flex:none;border-radius:9px;background:#E8ECF2 center/contain no-repeat;display:grid;place-items:center;color:var(--testo-3)}
.foto-disclosure .foto-mini svg{width:22px;height:22px}
.foto-disclosure summary .foto-chevron{margin-left:auto;color:var(--testo-3);transition:transform .2s}
.foto-disclosure[open] summary .foto-chevron{transform:rotate(180deg)}
.foto-disclosure .foto-grande{margin-top:8px;object-fit:contain;background:#EEF1F5}
/* navigazione nell'app */
/* modalità navigatore (a tutto schermo, stile Google Maps / Mappe Apple) */
/* Evita un filtro GPU sull'intera mappa (molto grande in navigazione): su alcuni telefoni produce un flash nero. */
body.navigando #mappa,body.navigando .leaflet-container{filter:none;background:linear-gradient(180deg,#DFEAF2 0,#EDF1F5 100%)}
.nav-top{position:absolute;z-index:650;left:8px;right:8px;top:calc(8px + env(safe-area-inset-top,0px));background:#0F6B4F;color:#fff;border-radius:18px;padding:12px 14px;display:flex;gap:12px;align-items:center;box-shadow:0 10px 28px rgba(0,60,70,.4)}
.nav-top{transform-origin:50% 0;animation:nav-top-in .46s cubic-bezier(.22,.75,.2,1) both}
@keyframes nav-top-in{from{opacity:0;transform:translateY(-20px) scale(.985)}to{opacity:1;transform:none}}
@keyframes nav-top-out{to{opacity:0;transform:translateY(-24px) scale(.98);filter:blur(4px)}}
.nav-freccia{width:64px;height:64px;flex:none;display:grid;place-items:center}
.nav-freccia svg{width:52px;height:52px}
.nav-testo{min-width:0;flex:1;display:flex;flex-direction:column;align-items:flex-start}
.nav-gps-stato{margin-top:5px;padding:4px 7px;border-radius:8px;background:#FFF0C2;color:#5C4200;font:650 12px/1.3 var(--sans)}
.nav-dist{font:800 30px/1.05 var(--sans);letter-spacing:-.01em}.nav-istr{font:600 18px/1.25 var(--sans);opacity:.97}
.nav-poi{position:absolute;z-index:649;left:8px;right:80px;top:calc(168px + env(safe-area-inset-top,0px));width:max-content;max-width:calc(100vw - 104px);background:#0A5540;color:#fff;border-radius:14px;padding:7px 11px;font:600 13px/1.25 var(--sans);white-space:normal;box-shadow:0 6px 14px rgba(0,0,0,.2)}
.nav-bottom{position:absolute;z-index:650;left:0;right:0;bottom:0;background:#fff;border-radius:22px 22px 0 0;box-shadow:0 -6px 24px rgba(20,30,50,.22);padding:14px 16px calc(16px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;gap:14px;animation:nav-bottom-in .48s cubic-bezier(.22,.75,.2,1) both}
.nav-anteprima{position:absolute;z-index:710;left:12px;right:12px;bottom:calc(14px + env(safe-area-inset-bottom,0px));max-width:580px;max-height:calc(100dvh - 160px);overflow:auto;margin:0 auto;padding:16px;border:1px solid rgba(255,255,255,.92);border-radius:22px;background:rgba(255,255,255,.97);box-shadow:0 14px 38px rgba(22,33,50,.26);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);animation:sale .28s cubic-bezier(.2,1.2,.4,1)}
.nav-anteprima[hidden]{display:none}
.nav-anteprima-intestazione{display:flex;align-items:center;justify-content:space-between;gap:10px;color:#1769C2;font:800 11px/1.2 var(--sans);letter-spacing:.08em}
.nav-anteprima-intestazione button{width:34px;height:34px;border:0;border-radius:50%;background:#EEF1F5;color:#344054;font-size:22px;cursor:pointer}
.nav-anteprima h2{margin:5px 0;font:800 20px/1.2 var(--sans);letter-spacing:-.02em}
.nav-anteprima p{margin:0 0 13px;color:var(--testo-2);font:600 14px/1.4 var(--sans)}
.nav-anteprima-azioni{display:grid;grid-template-columns:.85fr 1.4fr;gap:8px}
.nav-anteprima-azioni .btn{min-height:48px;margin:0}
body.nav-anteprima-aperta .nav-lato,body.nav-anteprima-aperta .nav-bottom,body.nav-anteprima-aperta .nav-top{display:none!important}
@keyframes nav-bottom-in{from{opacity:0;transform:translateY(34px) scale(.99)}to{opacity:1;transform:none}}
@keyframes nav-bottom-out{to{opacity:0;transform:translateY(42px)}}
.nav-x{width:48px;height:48px;border-radius:50%;border:0;background:#EEF1F5;font-size:20px;font-weight:700;color:#333;cursor:pointer;flex:none}
.nav-posto-avviso{position:absolute;z-index:710;left:12px;right:12px;bottom:calc(100px + env(safe-area-inset-bottom,0px));max-width:540px;max-height:calc(100dvh - 260px);overflow:auto;margin:0 auto;padding:16px;border:2px solid #F2B705;border-radius:20px;background:#FFFDF5;box-shadow:0 10px 32px #18233640}
.nav-posto-avviso h3{margin:0 0 8px;font-size:18px;line-height:1.25}
.nav-posto-avviso p{margin:0 0 14px;color:#5B4D26;line-height:1.4}
.nav-posto-scelte{display:flex;flex-direction:column;gap:8px}
.nav-posto-scelte button{width:100%;min-height:48px;border:1px solid #D7E1EC;border-radius:13px;padding:10px 12px;background:#fff;color:#145B9E;font:700 14px/1.25 var(--sans);cursor:pointer}
.nav-posto-scelte #nav-posto-altro{background:#176EF0;color:#fff;border-color:#176EF0}
.nav-posto-scelte button:focus-visible{outline:3px solid #F2B705;outline-offset:2px}
#nav-posto-ascolta{width:100%;min-height:44px;margin:0 0 10px;border:1px solid #176EF0;border-radius:12px;background:#EAF3FF;color:#145B9E;font:700 14px var(--sans);cursor:pointer}
#nav-posto-ascolta:disabled{opacity:.65}
.nav-posto-voce-stato{font-size:12px!important;color:#145B9E!important;margin:0 0 10px!important}
.voce-avviso-preferenza{display:flex;align-items:center;justify-content:space-between;gap:14px;border:1px solid var(--linea);border-radius:13px;padding:12px;background:var(--bg-2)}
.voce-avviso-preferenza>div{min-width:0}.voce-avviso-preferenza b{font-size:13px}.voce-avviso-preferenza .nota{margin:4px 0 0;line-height:1.35}
.nav-eta{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center}.nav-eta b{font:800 26px/1.1 var(--sans);color:#0F8A5F}.nav-eta span{font-size:14px;color:var(--testo-2)}
.nav-dest{width:48px;flex:none;font-size:12px;color:var(--testo-3);text-align:center;line-height:1.2}
.nav-google{min-width:68px;min-height:46px;flex:none;display:flex;align-items:center;justify-content:center;gap:5px;padding:0 9px;border:1px solid rgba(60,60,67,.13);border-radius:14px;background:#F7F8FA;color:#3C4043;text-decoration:none;font:650 12px var(--sans);transition:background .18s,transform .18s}
.nav-google svg{width:19px;height:19px;color:#4285F4}.nav-google:active{background:#E9EEF7;transform:scale(.96)}
.nav-lato{position:absolute;z-index:650;right:10px;top:calc(160px + env(safe-area-inset-top,0px));display:flex;flex-direction:column;gap:10px}
.nav-lato{animation:nav-controls-in .42s .06s cubic-bezier(.22,.75,.2,1) both}
@keyframes nav-controls-in{from{opacity:0;transform:translateX(20px) scale(.92)}to{opacity:1;transform:none}}
.nav-tondo{width:48px;height:48px;border-radius:50%;border:0;background:#fff;box-shadow:var(--ombra);font-size:20px;display:grid;place-items:center;color:#333;cursor:pointer}
.nav-tondo svg{width:22px;height:22px}.nav-tondo[aria-pressed="false"]{opacity:.5}
.nav-zoom-pair{display:flex;flex-direction:column;overflow:hidden;border-radius:24px;background:#fff;box-shadow:var(--ombra)}
.nav-zoom-pair button{width:50px;height:48px;border:0;background:transparent;color:#233047;font:700 23px/1 var(--sans);cursor:pointer;touch-action:manipulation;transition:background .14s ease,transform .14s ease}
.nav-zoom-pair button:active{background:rgba(0,122,255,.1);transform:scale(.94)}
.nav-zoom-pair button+button{border-top:1px solid #E7EAF0}
.nav-3d{font:800 12px var(--sans);letter-spacing:-.02em}
.nav-traf-badge{display:inline-flex;align-items:center;gap:6px;margin-top:5px;padding:4px 8px;border-radius:999px;background:rgba(255,255,255,.17);font:700 11px/1 var(--sans);letter-spacing:.02em}
.nav-traf-badge i{width:8px;height:8px;border-radius:50%;background:var(--nav-traffico-color,#22A06B);box-shadow:0 0 0 2px rgba(255,255,255,.2)}
.demo-badge{display:inline-flex;align-items:center;border-radius:999px;padding:2px 6px;background:#8A3B08;color:#fff;font:800 9px/1.3 var(--sans);letter-spacing:.05em;vertical-align:middle}
.pin.liberazione:not(.mio) .demo-pin-tag{right:auto;left:-13px}
.demo-pin-tag{position:absolute;right:-13px;top:-8px;padding:2px 4px;border-radius:5px;background:#8A3B08;color:white;font:800 8px/1 var(--sans);letter-spacing:.03em}
.demo-nota{margin:2px 0 0;text-align:center;color:var(--testo-3);font:600 12px/1.3 var(--sans)}   /* solo la scritta, in fondo alla scheda */
.demo-nota a{display:inline-block;margin-top:4px;color:#075DB5;font-weight:700}
.nav-ricentra{position:absolute;z-index:650;left:50%;transform:translateX(-50%);bottom:calc(110px + env(safe-area-inset-bottom,0px));border:0;background:#fff;color:#1A73E8;font:700 15px var(--sans);padding:12px 18px;border-radius:24px;box-shadow:var(--ombra);display:flex;gap:8px;align-items:center;cursor:pointer}
.nav-ricentra svg{width:18px;height:18px}
.nav-vel{position:absolute;z-index:650;left:12px;bottom:calc(110px + env(safe-area-inset-bottom,0px));width:58px;height:58px;border-radius:50%;background:#fff;box-shadow:var(--ombra);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
.nav-vel{animation:nav-controls-in .42s .1s cubic-bezier(.22,.75,.2,1) both}
.nav-vel b{font:800 20px var(--sans)}.nav-vel span{font-size:10px;color:var(--testo-3)}
/* freccia di navigazione al posto del pallino */
.me-freccia{position:absolute;left:-22px;top:-22px;width:44px;height:44px;transform-origin:50% 50%;transition:transform .25s linear;will-change:transform;filter:drop-shadow(0 3px 5px rgba(0,0,0,.35))}
.auto3d-menu{position:fixed;z-index:980;width:min(286px,calc(100vw - 24px));padding:12px;border:1px solid #dce5ef;border-radius:16px;background:#fff;box-shadow:0 12px 36px #1422374a;color:#182230;font-family:var(--sans)}
.auto3d-menu[hidden]{display:none}
.auto3d-menu header{display:flex;align-items:center;justify-content:space-between;font-size:15px}
.auto3d-menu header button{width:30px;height:30px;border:0;border-radius:50%;background:#f0f3f7;color:#344054;font-size:20px;cursor:pointer}
.auto3d-menu p{margin:4px 0 10px;color:#687385;font-size:12px;line-height:1.35}
.auto3d-opzioni{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.auto3d-opzioni button{display:flex;align-items:center;gap:8px;min-height:44px;padding:7px 9px;border:1px solid #dce3eb;border-radius:11px;background:#fff;color:#243248;text-align:left;font:600 12px var(--sans);cursor:pointer}
.auto3d-opzioni button[aria-pressed=true]{border-color:#1675e8;background:#eef6ff;color:#0d5ab8;box-shadow:inset 0 0 0 1px #1675e8}
.auto3d-opzioni button span{font-size:20px;line-height:1}
.auto3d-opzioni button.auto3d-opzione-freccia{grid-column:1/-1}
.freccia-opzioni{display:flex;gap:8px;flex-wrap:wrap}
.freccia-opzioni[hidden]{display:none}
.freccia-opzioni button{display:grid;justify-items:center;gap:4px;min-width:48px;padding:7px 8px;border:1px solid #dce3eb;border-radius:10px;background:#fff;color:#243248;font:600 10px var(--sans);cursor:pointer}
.freccia-opzioni button i{width:19px;height:19px;border:2px solid #fff;border-radius:50%;background:var(--c);box-shadow:0 0 0 1px #697586,0 1px 3px #0003}
.freccia-opzioni button[aria-pressed=true]{border-color:#1675e8;background:#eef6ff;box-shadow:inset 0 0 0 1px #1675e8}
.freccia-opzioni button[data-colore-freccia=blu]{--c:#1A73E8}.freccia-opzioni button[data-colore-freccia=verde]{--c:#14A86C}.freccia-opzioni button[data-colore-freccia=arancione]{--c:#F28C28}.freccia-opzioni button[data-colore-freccia=rossa]{--c:#DF3B45}.freccia-opzioni button[data-colore-freccia=viola]{--c:#8B5CF6}
.colori-auto-opzioni button[data-colore-auto=blu]{--c:#1976D2}.colori-auto-opzioni button[data-colore-auto=rossa]{--c:#E53935}.colori-auto-opzioni button[data-colore-auto=verde]{--c:#20A464}.colori-auto-opzioni button[data-colore-auto=nera]{--c:#263238}.colori-auto-opzioni button[data-colore-auto=bianca]{--c:#F2F4F7}.colori-auto-opzioni button[data-colore-auto=gialla]{--c:#F9A825}
body.navigando .top,body.navigando .cerca-barra,body.navigando #aggancio,body.navigando #chip-posti,body.navigando #fab-piu,body.navigando .fab-col,body.navigando #menu-azioni,
body.nav-uscita .top,body.nav-uscita .cerca-barra,body.nav-uscita #aggancio,body.nav-uscita #chip-posti,body.nav-uscita #fab-piu,body.nav-uscita .fab-col,body.nav-uscita #menu-azioni{
  opacity:0!important;pointer-events:none!important;transform:translateY(-8px);transition:opacity .24s ease,transform .24s ease}
/* grappoli di posti vicini tra loro (con poco zoom): un tocco e si aprono */
.grappolo{position:relative;margin:-26px 0 0 -26px;width:52px;height:52px;border:3px solid #fff;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:radial-gradient(circle at 30% 24%,#54C7FF 0,#1687FF 43%,#0758D6 100%);color:#fff;font:850 17px/1 var(--sans);text-shadow:0 1px 2px rgba(0,35,90,.45);box-shadow:0 0 0 2px rgba(0,68,160,.82),0 5px 16px rgba(0,34,91,.48);transition:transform .16s ease,filter .16s ease}
@media (hover:hover){.grappolo:hover{transform:scale(1.08);filter:brightness(1.08)}}.grappolo:active{transform:scale(.94)}
.grappolo.libero-altri{background:radial-gradient(circle at 30% 24%,#56D9A0 0,#20A66D 45%,#08774D 100%);box-shadow:0 0 0 2px #075E3F,0 5px 16px rgba(0,55,38,.45)}
.grappolo.libero-mio{background:radial-gradient(circle at 30% 24%,#54C7FF 0,#1687FF 43%,#0758D6 100%)}
.grappolo.uscita-altri{background:radial-gradient(circle at 30% 24%,#FFD072 0,#F59E0B 46%,#B45309 100%);box-shadow:0 0 0 2px #8A4500,0 5px 16px rgba(81,42,0,.42)}
.grappolo.uscita-mio{background:radial-gradient(circle at 30% 24%,#C4A5FF 0,#8B5CF6 46%,#5B35B5 100%);box-shadow:0 0 0 2px #4D2C9E,0 5px 16px rgba(52,30,110,.44)}
.grappolo.t-verde{background:radial-gradient(circle at 30% 24%,#56D9A0 0,#20A66D 45%,#08774D 100%);box-shadow:0 0 0 2px #075E3F,0 5px 16px rgba(0,55,38,.45)}
.grappolo.t-giallo{background:radial-gradient(circle at 30% 24%,#FFE27A 0,#F2B705 46%,#B07F00 100%);box-shadow:0 0 0 2px #8A6400,0 5px 16px rgba(81,60,0,.42)}
.grappolo.t-rosso{background:radial-gradient(circle at 30% 24%,#FF8A8E 0,#E5393F 46%,#A11C22 100%);box-shadow:0 0 0 2px #7E1418,0 5px 16px rgba(90,10,14,.44)}
.pin .uscita-ico{position:absolute;right:-8px;top:-8px;width:22px;height:22px;border-radius:50%;background:#1b2430;color:#fff;display:grid;place-items:center;font:800 13px/1 var(--sans);border:2px solid #fff;box-shadow:0 2px 5px rgba(0,0,0,.3)}
.grappolo.misto{background:radial-gradient(circle,#102A43 0 50%,transparent 53%),conic-gradient(#18A66A 0 25%,#1687FF 25% 50%,#F59E0B 50% 75%,#8B5CF6 75%);}
.grappolo.g2{width:60px;height:60px;margin:-30px 0 0 -30px;font-size:18px}.grappolo.g3{width:70px;height:70px;margin:-35px 0 0 -35px;font-size:20px}
.grappolo small{position:absolute;bottom:-19px;left:50%;transform:translateX(-50%);background:#102A43;color:#fff;border:1px solid rgba(255,255,255,.95);font:750 10px/1 var(--sans);padding:4px 6px;border-radius:7px;white-space:nowrap;box-shadow:0 2px 7px rgba(0,0,0,.35)}
.grappolo::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid rgba(22,135,255,.75);box-shadow:0 0 0 2px rgba(255,255,255,.7);animation:onda 2.2s ease-out infinite;pointer-events:none}
.pin.scoppia{animation:scoppia .45s cubic-bezier(.2,1.6,.4,1)}
@keyframes scoppia{from{transform:translate(var(--dx,0),var(--dy,0)) scale(.35);opacity:.2}to{transform:none;opacity:1}}
.pin.mio .c{border-radius:14px;border-color:var(--c);box-shadow:0 0 0 3px #fff,0 0 0 6px var(--c),0 6px 14px rgba(0,0,0,.3)}
.pin.mio .c svg{color:var(--c)}
.pin.mio .onda{border-radius:14px;border-color:var(--c);animation-duration:2.8s}
.pin.mio .stella{position:absolute;right:-8px;top:-8px;width:22px;height:22px;border-radius:50%;background:var(--c);color:#fff;display:grid;place-items:center;font-size:13px;line-height:1;border:2px solid #fff;box-shadow:0 2px 5px rgba(0,0,0,.3)}
.pin.mio .tuo{position:absolute;left:50%;top:62px;transform:translateX(-50%);background:var(--c);color:#fff;font:800 10px/1 var(--sans);letter-spacing:.05em;padding:4px 6px;border-radius:7px;white-space:nowrap;box-shadow:0 2px 6px rgba(0,0,0,.3)}
.pin.scade .c{border-style:dashed}
.posto.mio:not(.liberazione){border-color:#1687FF;background:#EFF7FF}
.posto.mio .tag-tuo{display:inline-block;background:#0758D6;color:#fff;font:800 9.5px/1 var(--sans);letter-spacing:.05em;padding:3px 5px;border-radius:5px;margin-right:5px;vertical-align:2px}
.posto.liberazione:not(.mio){border-color:#F59E0B;background:#FFF8EB}
.posto.mio.liberazione{border-color:#8B5CF6;background:#F5F0FF}
.posto .tag-uscita{display:inline-block;background:#B45309;color:#fff;font:800 9.5px/1 var(--sans);letter-spacing:.05em;padding:3px 5px;border-radius:5px;margin-right:5px;vertical-align:2px}
.posto.mio.liberazione .tag-uscita{background:#7042CF}
.legenda-pin{position:absolute;z-index:490;left:12px;bottom:calc(75px + env(safe-area-inset-bottom,0px));display:grid;grid-template-columns:repeat(2,max-content);gap:6px 10px;padding:8px 10px;border:1px solid rgba(255,255,255,.9);border-radius:12px;background:rgba(255,255,255,.93);box-shadow:0 5px 18px rgba(20,30,50,.16);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);pointer-events:none}
.legenda-pin span{display:flex;align-items:center;gap:5px;color:#344054;font:650 10px/1 var(--sans);white-space:nowrap}
.legenda-pin i{width:9px;height:9px;border:1px solid #fff;border-radius:50%;box-shadow:0 0 0 1px rgba(16,24,40,.18);flex:none}
body.navigando .legenda-pin,body.nav-uscita .legenda-pin{opacity:0;pointer-events:none}
.nota-mio{background:#EFF7FF;border:1.5px solid #C9E3FF;color:#174A7E;border-radius:12px;padding:10px 12px;font-size:13.5px;margin:0}
/* posti entro 250 m: lampeggiano; il più vicino è "agganciato" */
.pin.vicino .c{animation:lampo 1s ease-in-out infinite}
@keyframes lampo{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,0),0 4px 12px rgba(0,0,0,.3);filter:brightness(1)}50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--c) 45%,transparent),0 0 22px 6px var(--c);filter:brightness(1.25)}}
.pin.agganciato .c{border-color:var(--tur);animation:lampo-tur .9s ease-in-out infinite}
@keyframes lampo-tur{0%,100%{box-shadow:0 0 0 0 rgba(0,179,199,0),0 4px 12px rgba(0,0,0,.3)}50%{box-shadow:0 0 0 7px rgba(0,179,199,.35),0 0 26px 8px rgba(0,214,235,.9)}}
.pin .dist{position:absolute;left:50%;top:56px;transform:translateX(-50%);background:#1b2430;color:#fff;font:700 11px/1 var(--sans);padding:3px 6px;border-radius:8px;white-space:nowrap;box-shadow:0 2px 6px rgba(0,0,0,.3)}
.pin.agganciato .dist{background:var(--tur)}
.percorso-luce{filter:drop-shadow(0 0 6px rgba(0,214,235,.95))}
.percorso-flusso{stroke-dasharray:2 14;animation:flusso 1s linear infinite}
@keyframes flusso{to{stroke-dashoffset:-16}}
.aggancio{position:absolute;z-index:520;left:12px;top:calc(118px + env(safe-area-inset-top,0px));width:158px;background:#fff;border-radius:16px;box-shadow:0 8px 24px rgba(20,30,50,.28);overflow:hidden;cursor:pointer;animation:entra .35s cubic-bezier(.2,1.4,.4,1)}
@keyframes entra{from{transform:translateX(-30px) scale(.9);opacity:0}to{transform:none;opacity:1}}
.aggancio .ft{height:84px;background:#E8ECF2 center/cover no-repeat;position:relative;display:grid;place-items:center;color:var(--testo-3)}
.aggancio .ft svg{width:30px;height:30px}
.aggancio .tag{position:absolute;left:8px;top:8px;background:var(--tur);color:#fff;font:800 10px/1 var(--sans);padding:4px 6px;border-radius:6px;letter-spacing:.03em}
.aggancio .chiudi{position:absolute;right:6px;top:6px;width:24px;height:24px;border-radius:50%;border:0;background:rgba(0,0,0,.55);color:#fff;font-size:15px;line-height:1;cursor:pointer}
.aggancio .inf{padding:8px 10px 10px;display:flex;flex-direction:column;gap:2px}
.aggancio .inf b{font-size:13.5px;line-height:1.2}
.aggancio .inf span{font-size:12px;color:var(--testo-2)}
.aggancio .km{display:flex;justify-content:space-between;align-items:baseline;margin-top:4px}
.aggancio .km strong{font:800 17px var(--sans);color:var(--tur)}
.aggancio .km em{font-style:normal;font-size:12px;font-weight:700;color:var(--verde)}
.aggancio .km em.g{color:#C98A00}
.aggancio .avviso-t{color:#C0392B!important;font-weight:700}
.aggancio .motivo{font-size:11px!important;color:var(--testo-3)!important;line-height:1.25}
.aggancio .vai{margin-top:6px;display:block;text-align:center;background:var(--tur);border:0;width:100%;cursor:pointer;color:#fff;border-radius:10px;padding:7px;font-weight:700;font-size:13px;text-decoration:none}
@media (prefers-reduced-motion:reduce){.pin.vicino .c,.pin.agganciato .c,.percorso-flusso{animation:none}}
@media (prefers-reduced-motion:reduce){.pin .onda{animation:none;display:none}}
.me-wrap{position:relative;width:0;height:0}
.me-wrap .me{position:absolute;left:0;top:0}
.me-cono{position:absolute;left:-40px;top:-40px;width:80px;height:80px;transition:transform .25s linear;will-change:transform;pointer-events:none;
  background:conic-gradient(from -32deg,rgba(30,107,255,.55),rgba(30,107,255,0) 64deg,transparent 64deg);border-radius:50%;
  -webkit-mask:radial-gradient(circle,#000 0 38px,transparent 40px);mask:radial-gradient(circle,#000 0 38px,transparent 40px)}
.me{width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:var(--blu);border:3px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.15),0 2px 8px rgba(0,0,0,.3)}
.mirino{width:30px;height:30px;margin:-30px 0 0 -15px;transform-origin:50% 92%;filter:drop-shadow(0 3px 5px rgba(0,35,90,.32));animation:mirino-arrivo .34s cubic-bezier(.2,1.5,.4,1) both}
@keyframes mirino-arrivo{from{opacity:0;transform:translateY(-13px) scale(.72)}to{opacity:1;transform:translateY(0) scale(1)}}
.punto-nav-mappa{width:34px;height:34px;border:3px solid #fff;border-radius:50% 50% 50% 8px;background:#087cf0;box-shadow:0 3px 14px #0005;transform:rotate(-45deg);display:grid;place-items:center}
.punto-nav-mappa span{width:8px;height:8px;border-radius:50%;background:#fff;transform:rotate(45deg)}
.toast{position:fixed;z-index:900;left:50%;top:calc(116px + env(safe-area-inset-top,0px));transform:translateX(-50%);background:var(--testo);color:#fff;border-radius:12px;padding:11px 16px;font-size:14px;max-width:calc(100% - 32px);box-shadow:var(--ombra)}
/* ---------- DIREZIONE VISIVA: ispirazione iOS, senza cambiare la logica ---------- */
:root{
  --bg:#F5F5F7; --bg-2:#F2F2F7; --linea:rgba(60,60,67,.14);
  --testo:#1D1D1F; --testo-2:#6E6E73; --testo-3:#8E8E93;
  --tur:#0A84FF; --blu:#007AFF; --blu-chiaro:#EAF3FF;
  --verde:#30A46C; --verde-chiaro:#E8F7EE; --giallo:#D99500; --rosso:#FF453A;
  --ombra:0 8px 28px rgba(28,38,56,.12); --r:20px;
  --display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",sans-serif;
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  color-scheme:light;
}
button,input,select{font-family:var(--sans)}
button{transition:background-color .2s ease,border-color .2s ease,color .2s ease,box-shadow .2s ease,transform .22s cubic-bezier(.2,.75,.25,1)}
button:active{transform:scale(.975)}

/* Accesso */
#accesso{
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at 12% 8%,rgba(0,122,255,.12),transparent 36%),radial-gradient(ellipse at 92% 92%,rgba(88,86,214,.09),transparent 34%),#F5F5F7;
  padding:calc(24px + env(safe-area-inset-top,0px)) 18px calc(24px + env(safe-area-inset-bottom,0px));
}
.acc-box{
  width:min(100%,470px);max-width:470px;margin:auto;gap:22px;padding:clamp(24px,5vw,38px);
  border:1px solid rgba(255,255,255,.88);border-radius:30px;background:rgba(255,255,255,.88);
  box-shadow:0 28px 80px rgba(37,48,72,.13),0 2px 8px rgba(37,48,72,.04);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
}
.logo{gap:14px}
.logo i{width:52px;height:52px;border-radius:17px;background:linear-gradient(145deg,#1687FF,#0062D9);font:750 29px/1 var(--display);box-shadow:0 8px 20px rgba(0,122,255,.24)}
.marchio{font:750 25px/1.05 var(--display);letter-spacing:-.045em}
.marchio b{color:var(--blu)}
.logo p{margin:5px 0 0;font-size:13px;color:var(--testo-2)}
.logo p.slogan{font-size:13px;font-weight:500;font-style:normal;color:var(--testo-2)}
.slogan b{color:var(--blu);font-weight:650}
.acc-intro{display:flex;flex-direction:column;gap:7px;padding:1px 0 2px}
.acc-kicker{display:flex;align-items:center;gap:8px;color:var(--blu);font-size:11px;line-height:1.2;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
.acc-kicker i{width:7px;height:7px;border-radius:50%;background:var(--verde);box-shadow:0 0 0 4px rgba(48,164,108,.12)}
.acc-intro h1{margin:0;max-width:14ch;font:700 clamp(25px,6vw,31px)/1.1 var(--display);letter-spacing:-.045em;color:#1D1D1F}
.acc-intro p{margin:0;max-width:38ch;color:var(--testo-2);font-size:14px;line-height:1.5}
#scr-form{display:flex;flex-direction:column;gap:17px}
.seg{background:#F1F1F5;border-radius:13px;padding:4px;margin:0!important}
.seg button{min-height:40px;padding:9px 12px;border-radius:10px;font-size:14px;font-weight:600;color:var(--testo-2)}
.seg button[aria-pressed="true"]{background:#fff;color:var(--testo);box-shadow:0 1px 3px rgba(0,0,0,.09),0 1px 2px rgba(0,0,0,.05)}
.form{gap:14px}
.campo{gap:7px}
.campo>span,.etichetta{font-size:12px;font-weight:600;color:#56565B}
.campo input,.campo select{min-height:48px;padding:12px 14px;border:1px solid rgba(60,60,67,.2);border-radius:13px;background:rgba(255,255,255,.96);font-size:15px;transition:border-color .2s ease,box-shadow .2s ease}
.campo input::placeholder{color:#A1A1A6}
.campo input:focus,.campo select:focus{border-color:var(--blu);outline:0;box-shadow:0 0 0 4px rgba(0,122,255,.12)}
.consenso{gap:9px;color:var(--testo-2);font-size:13px;line-height:1.4}
.consenso input{width:18px;height:18px;accent-color:var(--blu)}
.btn{min-height:48px;border-radius:14px;padding:13px 18px;background:linear-gradient(180deg,#1687FF,#0077ED);box-shadow:0 5px 13px rgba(0,122,255,.2);font-size:15px;font-weight:650;letter-spacing:-.01em}
/* l'effetto al passaggio del mouse solo su PC e solo sui bottoni blu: sul telefono dopo il tocco restava attivo
   e i bottoni verdi/grigi (es. "L'ho preso", "Non c'era più") diventavano blu */
@media (hover:hover){.btn:not(.sec):not(.verde):not(.link):hover:not(:disabled){background:linear-gradient(180deg,#087EF0,#0069DC);box-shadow:0 7px 18px rgba(0,122,255,.24)}}
.btn:active:not(:disabled){box-shadow:none}
.btn.sec{background:#F2F2F7;color:var(--blu);box-shadow:none}
.btn.verde{background:linear-gradient(180deg,#34B878,#248F5B);color:#fff;box-shadow:0 5px 13px rgba(48,164,108,.17)}
.btn.link{min-height:40px;box-shadow:none}
@media (hover:hover){.btn.link:hover{background:rgba(0,122,255,.06)}}
.esito{border-radius:13px}
.chips label{border:1px solid var(--linea);border-radius:13px;background:#fff}
.chips label:has(input:checked){border-color:rgba(0,122,255,.55);background:var(--blu-chiaro);color:#005FC5}

/* Mappa, pulsanti e pannelli */
.top .pillola,.fab,.bussola,.ruota-btn,.chip-posti,.legenda-tr,.nav-ricentra{
  background:rgba(255,255,255,.88);border:1px solid rgba(255,255,255,.78);
  box-shadow:0 5px 20px rgba(25,35,52,.14);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
}
.top .pillola{min-height:42px;border-radius:16px;padding:8px 12px}
.top .pillola .marchio{font-size:17px;letter-spacing:-.035em}
.top .traffico-chip{min-width:42px;justify-content:center}
.top .punti-mini{font-size:12px}
.fab{width:48px;height:48px;color:#3A3A3C}
@media (hover:hover){.fab:hover,.bussola:hover,.ruota-btn:hover{background:#fff;box-shadow:0 8px 22px rgba(25,35,52,.18)}}
.cerca[aria-pressed="true"]{background:var(--tur);color:white}
.campana[aria-pressed="true"]{background:var(--blu);color:white}
.cerca-barra{height:50px;border:1px solid rgba(255,255,255,.8);border-radius:17px;background:rgba(255,255,255,.92);box-shadow:0 8px 24px rgba(25,35,52,.15);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.cerca-barra input{font-size:15px}
.sheet{max-width:580px;border:1px solid rgba(255,255,255,.8);border-bottom:0;border-radius:26px 26px 0 0;padding:9px 20px calc(20px + env(safe-area-inset-bottom,0px));gap:15px;box-shadow:0 -12px 38px rgba(24,35,54,.16);animation:sheet-in .32s cubic-bezier(.2,.75,.25,1) backwards}   /* backwards, non both: finita l'apertura la scheda si deve poter trascinare */
@keyframes sheet-in{from{transform:translateY(22px);opacity:.7}to{transform:translateY(0);opacity:1}}
.maniglia{width:36px;height:5px;background:#D1D1D6}
.sheet h2{font-size:20px;font-weight:700;letter-spacing:-.025em}
.chiudi{width:36px;height:36px;background:#F2F2F7;color:#6E6E73;font-size:20px}
@media (hover:hover){.chiudi:hover{background:#E7E7EC;color:var(--testo)}}
.info,.gps-box{background:#F5F5F7}
.info{border-radius:14px;padding:11px 12px}
.posto{border:1px solid rgba(60,60,67,.14);border-radius:16px;padding:9px;transition:background .18s ease,border-color .18s ease,transform .18s ease}
@media (hover:hover){.posto:hover{background:#FAFAFC;border-color:rgba(0,122,255,.25)}}
.chip-posti{min-height:46px;padding:11px 15px;border-radius:16px;font-size:14px;font-weight:650}
.fab-piu{width:58px;height:58px;background:linear-gradient(145deg,#1687FF,#0066DE);box-shadow:0 9px 24px rgba(0,103,224,.32)}
@media (hover:hover){.fab-piu:hover{box-shadow:0 12px 28px rgba(0,103,224,.38)}}
.az{border:1px solid rgba(255,255,255,.32);border-radius:16px;padding:13px 17px;font-size:14px;box-shadow:0 8px 22px rgba(20,30,45,.2)}
.az.foto{background:linear-gradient(145deg,#1687FF,#0066DE)}
.az.libera{background:linear-gradient(145deg,#34B878,#248F5B)}
.pop-avvisi,.meta-pop,.sugg{border:1px solid rgba(255,255,255,.84);border-radius:18px;background:rgba(255,255,255,.94);box-shadow:0 14px 38px rgba(22,33,50,.2);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px)}
.sugg{background:#fff}          /* i suggerimenti coprono del tutto quello che sta sotto: niente legenda in trasparenza */
.pop-strati button[aria-pressed=true]{background:var(--blu-chiaro);color:#005FC5}
.traffico-chip.attivo{outline:2px solid var(--blu);outline-offset:1px}
.nav-top{border-radius:22px;background:linear-gradient(145deg,#155F4D,#0E493B);box-shadow:0 12px 30px rgba(0,55,43,.28)}
.nav-bottom{max-width:580px;margin:0 auto;border:1px solid rgba(255,255,255,.8);border-bottom:0;border-radius:26px 26px 0 0;box-shadow:0 -12px 32px rgba(24,35,54,.16)}
.toast{border-radius:15px;background:rgba(29,29,31,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
body.nav-uscita .nav-top{animation:nav-top-out .28s ease-in both}
body.nav-uscita .nav-bottom{animation:nav-bottom-out .3s ease-in both}
@keyframes nav-controls-out{to{opacity:0;filter:blur(3px)}}
body.nav-uscita .nav-lato,body.nav-uscita .nav-vel,body.nav-uscita .nav-ricentra{animation:nav-controls-out .24s ease-in both}
@media(max-width:560px){
  #accesso{align-items:flex-start;padding-left:14px;padding-right:14px}
  .acc-box{margin:auto;padding:25px 21px;border-radius:26px;gap:20px}
  .logo i{width:48px;height:48px;border-radius:15px}
  .logo .marchio{font-size:23px}
  .acc-intro h1{max-width:17ch;font-size:27px}
  .sheet{padding-left:16px;padding-right:16px}
  .top{left:10px;right:10px;gap:5px}
  .top .pillola{padding:8px 9px}
}
@media(max-height:680px){#accesso{align-items:flex-start}.acc-box{margin:auto}}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
.google-accesso{display:flex;flex-direction:column;gap:11px}
.google-btn{min-height:49px;width:100%;display:flex;align-items:center;justify-content:center;gap:11px;border:1px solid rgba(60,60,67,.2);border-radius:14px;background:#fff;color:#303134;font-size:14.5px;font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.04)}
@media (hover:hover){.google-btn:hover:not(:disabled){background:#FAFAFC;border-color:rgba(60,60,67,.32);box-shadow:0 4px 12px rgba(28,38,56,.08)}}
.google-btn:disabled{cursor:not-allowed;opacity:.6;box-shadow:none}
.google-consenso{align-items:flex-start;padding:0 2px}
.google-consenso input{margin-top:1px;flex:none}
.google-configurazione{margin:0;padding:10px 12px;border-radius:12px;background:#F2F2F7;font-size:12px;line-height:1.45}
.separatore-social{display:flex;align-items:center;gap:12px;color:var(--testo-3);font-size:12px;text-align:center}
.separatore-social::before,.separatore-social::after{content:"";height:1px;flex:1;background:var(--linea)}

/* Traffico sotto i nomi delle vie: il colore si moltiplica con la mappa, così le scritte scure restano visibili */
.traffico-vett{mix-blend-mode:normal;filter:none;opacity:1}
/* Anche il traffico Mapbox e la stima preservano il testo scuro delle tessere OSM.
   Sul satellite la composizione normale mantiene colori leggibili sulle foto. */
.leaflet-traffico-pane{mix-blend-mode:multiply}
.leaflet-traffico-pane.traffico-su-satellite{mix-blend-mode:normal}
.traffico-su-satellite .traffico-vett,.traffico-su-satellite .sfumatura{mix-blend-mode:normal;opacity:1;filter:none}

/* Strisce e stalli (da vicino): "P" dove gli utenti hanno segnalato posti, 🛵 per gli stalli moto */
.sosta-ico{position:relative;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:6px;display:grid;place-items:center;font:800 11px/1 var(--sans);box-shadow:0 1px 4px rgba(0,0,0,.35)}
.sosta-ico.blu{background:#1E6BFF;color:#fff;border:1.5px solid #fff}
.sosta-ico.bianche{background:#fff;color:#1F2937;border:1.5px solid #4B5563}
.sosta-ico.moto{background:#fff;border:1.5px solid #4B5563;border-radius:50%;font-size:12px}
.sosta-ico small{position:absolute;right:-7px;top:-7px;min-width:13px;height:13px;padding:0 2px;border-radius:7px;background:#1b2430;color:#fff;font:700 8.5px/13px var(--sans);text-align:center}
.riga-sosta input:checked{background:#1E6BFF}
body.navigando .sosta-ico{display:none}

/* Legenda delle soste: in basso a sinistra, sopra "posti liberi"; solo da vicino e con le strisce accese */
.legenda-sosta{position:absolute;z-index:590;left:12px;bottom:calc(76px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:5px;
  padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.93);box-shadow:0 5px 18px rgba(20,30,50,.16);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);pointer-events:none}
.legenda-sosta span{display:flex;align-items:center;gap:7px;color:#344054;font:650 10.5px/1 var(--sans);white-space:nowrap}
.legenda-sosta .ls{width:22px;height:9px;border-radius:2px;flex:none;display:grid;place-items:center;font-style:normal}
.legenda-sosta .ls.blu{background:linear-gradient(#82C5FF 0 3px,transparent 3px 6px,#82C5FF 6px 9px);box-shadow:0 0 0 1px #245B88}
.legenda-sosta .ls.bianche{background:linear-gradient(#29384C 0 1px,#fff 1px 3px,#29384C 3px 4px,transparent 4px 5px,#29384C 5px 6px,#fff 6px 8px,#29384C 8px 9px);box-shadow:0 0 0 1px #29384C}
.legenda-sosta small{color:#667085;font:600 9.5px/1.2 var(--sans);max-width:130px;white-space:normal}
.legenda-sosta .ls.moto{height:14px;font-size:12px}
body.navigando .legenda-sosta,body.nav-uscita .legenda-sosta{display:none}

/* I banner a sinistra (legende, posto più vicino, chip dei posti) non entrano mai nella colonna dei tasti
   a destra (bussola, zoom, layer, avvisi, posto migliore): 12px margine + 48px tasto + spazio = 84px riservati.
   Serve soprattutto sui telefoni con i caratteri ingranditi, dove le legende si allargano. */
.legenda-tr,.legenda-sosta,.aggancio,.chip-posti{max-width:calc(100% - 84px);box-sizing:border-box}
/* Legenda delle zone del traffico: UNA sola regola (prima era scritta in 4 punti che si sovrascrivevano).
   In alto a sinistra sotto la ricerca, compatta per coprire poca mappa, e non prende i tocchi: i posti che le
   finiscono sotto restano toccabili. Riga 1 titolo, riga 2 barra dei colori, riga 3 "in fretta" / "con calma".
   Sta sotto la barra di ricerca (z-index 560 < 620 della ricerca aperta): i suggerimenti non vengono mai coperti. */
.legenda-tr{position:absolute;z-index:560;left:12px;top:calc(124px + env(safe-area-inset-top,0px));
  display:grid;grid-template-columns:1fr 1fr;gap:3px 10px;min-width:180px;padding:6px 10px 7px;border-radius:12px;
  background:rgba(255,255,255,.94);border:1px solid rgba(20,30,50,.08);box-shadow:0 4px 14px rgba(20,30,50,.18);
  font:650 11.5px/1.2 var(--sans);color:var(--testo);pointer-events:none}
.legenda-tr b{grid-column:1/-1;font-weight:750}
.legenda-tr i{grid-column:1/-1;height:7px;border-radius:4px;background:linear-gradient(90deg,#E5393F,#F57C2B,#F6B93B,#8BC34A,#269E6B);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.legenda-tr span{font-size:10.5px;color:var(--testo-2)}.legenda-tr span:last-child{text-align:right}
.legenda-sosta span{white-space:normal;line-height:1.15}
/* finestrelle aperte dai tasti di destra (livelli, avvisi, posto migliore): stanno sopra le legende e la schedina */
.fab-col.pop-aperto{z-index:600}
.legenda-tr,.legenda-sosta,.aggancio{transition:opacity .15s ease}
.coperto-da-pop,.senza-spazio{opacity:0!important;pointer-events:none!important}
/* in guida la linea bianca animata sul percorso costava un ridisegno della mappa a ogni fotogramma: la tolgo */
body.navigando .percorso-flusso{display:none}
/* la lineetta in cima ai fogli: più facile da prendere col dito per trascinare in giù */
.sheet>.maniglia{box-sizing:content-box;width:40px;height:5px;padding:10px 60px;margin:-8px auto -6px;background:#C4C4CA;background-clip:content-box;touch-action:none;cursor:grab;flex-shrink:0}
.sheet{overflow:hidden}
.sheet>.sheet-contenuto{display:flex;flex:1 1 auto;flex-direction:column;gap:15px;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.sheet.compatto>.sheet-contenuto{gap:12px}
.sheet>.sheet-top{flex-shrink:0}   /* con la scheda bassa e il contenuto che scorre, barretta e titolo non vengono schiacciati */
/* scheda del posto allargata trascinando in su la barretta */
#s-posto.espanso{max-height:88%}
/* la scheda del posto occupa al massimo metà schermo (il resto scorre dentro): sopra resta la mappa con il pin */
#s-posto{max-height:min(52%,460px)}
/* il logo dentro l'app è la stessa immagine dell'icona del telefono: identici */
.logo i{overflow:hidden;background:none}
.logo i img{width:100%;height:100%;display:block}
/* posto imparato dalle segnalazioni e confermato (preso da qualcuno o segnalato da più persone): piccola spunta verde */
.sosta-ico.sicuro::after{content:"✓";position:absolute;right:-6px;bottom:-6px;width:13px;height:13px;border-radius:50%;background:#18A66A;color:#fff;font:800 9px/13px var(--sans);text-align:center;box-shadow:0 0 0 1.5px #fff}
/* legenda: le "P" dei posti validati dagli utenti, uguali a quelle sulla mappa */
.legenda-sosta .ls-p{position:relative;width:14px;height:14px;border-radius:4px;flex:none;display:grid;place-items:center;font:800 8.5px/1 var(--sans);font-style:normal;margin-right:-3px}
.legenda-sosta .ls-p.blu{background:#1E6BFF;color:#fff;border:1px solid #fff;box-shadow:0 0 0 1px rgba(11,61,145,.35)}
.legenda-sosta .ls-p.bianche{background:#fff;color:#1F2937;border:1px solid #4B5563}
.legenda-sosta .ls-p+.ls-p{margin-left:-2px}
.legenda-sosta .ls-p.sicuro::after{content:"✓";position:absolute;right:-5px;bottom:-5px;width:9px;height:9px;border-radius:50%;background:#18A66A;color:#fff;font:800 6.5px/9px var(--sans);text-align:center;box-shadow:0 0 0 1px #fff}
.legenda-sosta .ls-p.sicuro{margin-right:7px}
/* tasto "i" accanto a "posti liberi": apre/chiude la legenda della mappa */
.gruppo-sx{display:flex;align-items:center;gap:8px;min-width:0}
.info-legenda{flex:none;width:46px;height:46px;border-radius:50%;border:0;background:#fff;box-shadow:var(--ombra);color:var(--blu);font:italic 800 19px/1 Georgia,"Times New Roman",serif;display:grid;place-items:center;cursor:pointer}
.info-legenda.attivo{background:var(--blu);color:#fff}
.gruppo-sx .chip-posti{max-width:none;min-width:0}
/* anteprima con la sagoma del veicolo disegnata sulla foto */
.sg-sagoma{margin:0;border-radius:14px;overflow:hidden;background:#EEF1F5;position:relative}
.sg-sagoma img{display:block;width:100%;max-height:260px;object-fit:contain;background:#1b2430}
.sg-sagoma figcaption{padding:7px 10px;font:650 12.5px/1.3 var(--sans);color:#0E7A3E;background:#EAF8EF}
.sg-sagoma.stretto figcaption{color:#9A5200;background:#FFF3E3}
.sg-sagoma.carica img{opacity:.35}
.sg-sagoma.carica figcaption{color:var(--testo-3);background:#F2F4F7}
/* contatore delle persone attive qui intorno (in alto, accanto al traffico) */
.top .attivi-chip{display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;column-gap:4px;row-gap:1px;align-items:center;padding:6px 9px;font-size:13px}
.attivi-chip span{grid-row:1/3}                                  /* 👥 a sinistra, numero sopra e raggio sotto */
.attivi-chip b{font:800 14px/1 var(--sans);color:var(--testo);text-align:center}
.attivi-chip small{font:650 9px/1 var(--sans);color:var(--testo-3);text-align:center;white-space:nowrap}
@media (max-width:400px){.top .punti-mini .barra{width:18px}.top .punti-mini{gap:4px}#chip-account svg{display:none}}
.attivi-chip.tanti b{color:#D9480F}
body.navigando .attivi-chip{display:none}
/* telefoni stretti (360 px): le quattro pillole in alto devono stare nello schermo. Via la barretta dei punti
   (resta "0/50") e un po' meno spazio dentro le pillole */
@media (max-width:380px){
  .top .punti-mini .barra{display:none}
  .top .pillola{padding:8px 9px}
  .top .attivi-chip{padding:6px 7px}
  .top .traffico-chip{padding:9px 8px!important}
  #chip-account .marchio{font-size:15px}
}
@media (max-width:340px){
  .top{gap:4px}
  .top .attivi-chip small{display:none}
  .top .attivi-chip{grid-template-rows:auto}
  #chip-account .marchio{font-size:13.5px}
}