/* MOTOWEB-S05 tappa B - Mappa viva: una carta sola, chiara come quella di MOTOTOUR, con tre viste (Giri, Paesaggio,
   In viaggio), il pannello «Le spie» (versione 1, scelta il 03/10/2026) e il dettaglio deciso dallo zoom.
   Tutto dentro .mv; i colori della carta seguono il faro del sito (giorno e notte). */
:root{--pg:#E3DCC9;--tr:#D8E0D2;--vicini:#F7F4EE;--vicini-bordo:#CFC6B2;--comune-bordo:#FBF9F4;--umbria-bordo:#8C8270;
  --anello:#1D1E20;--collina:#7A6A52;--tappa:#5C574E;--vetta:#6B3F22;--alone:#F5F1E8;--spia-bianca:#F4F1EA}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--pg:#2A2B27;--tr:#222A24;--vicini:#15181B;--vicini-bordo:#30353B;
  --comune-bordo:#111315;--umbria-bordo:#7A7468;--anello:#ECE6D8;--collina:#B4A88F;--tappa:#A7A195;--vetta:#E0B48A;--alone:#111315}}
:root[data-theme="dark"]{--pg:#2A2B27;--tr:#222A24;--vicini:#15181B;--vicini-bordo:#30353B;
  --comune-bordo:#111315;--umbria-bordo:#7A7468;--anello:#ECE6D8;--collina:#B4A88F;--tappa:#A7A195;--vetta:#E0B48A;--alone:#111315}

.mv{padding-block:1.4rem 3rem}
.mv h1,.mv h2{font-family:var(--f-display);font-weight:700;letter-spacing:.01em;text-wrap:balance;margin:0;line-height:1.05}
.mv .mv-testa{display:grid;gap:.4rem;padding-block:.4rem 1rem}
.mv .mv-testa h1{font-size:clamp(2rem,6vw,3.2rem);text-transform:uppercase}
.mv .mv-testa .intro{font-family:var(--f-read);max-width:66ch;margin:0;color:var(--fg-2)}
.mv :focus-visible{outline:3px solid var(--mezzeria);outline-offset:2px}
.mv .nota{font:400 .86rem/1.45 var(--f-ui);color:var(--fg-2);max-width:80ch;margin-top:1.2rem}
.mv .senza-js{position:absolute;inset:auto 1rem 1rem 1rem;z-index:5;background:var(--bg);border:1px solid var(--linea);border-radius:10px;padding:1rem;margin:0}

/* la scatola della carta */
.mv .mappa-box{position:relative;height:max(540px,74vh);border-radius:16px;overflow:hidden;border:1px solid var(--linea);background:var(--vicini);box-shadow:var(--ombra);isolation:isolate}
.mv #mappa{position:absolute;inset:0;background:var(--vicini);font-family:var(--f-ui)}
.mv .leaflet-container{background:var(--vicini)}
.mv .leaflet-control-zoom a{background:var(--bg);color:var(--fg);border-color:var(--linea);width:40px;height:40px;line-height:38px;font-size:20px}
.mv .leaflet-control-attribution{background:color-mix(in srgb,var(--bg) 80%,transparent);color:var(--fg-2);font:400 .68rem/1.3 var(--f-ui)}
.mv .leaflet-tooltip.tt{background:var(--asfalto);color:var(--su-asfalto);border:0;border-radius:6px;font:600 .8rem/1.2 var(--f-ui);padding:.35rem .55rem;box-shadow:var(--ombra)}
.mv .leaflet-tooltip.tt::before{display:none}

/* forme della carta: i colori vengono dalle variabili, giorno e notte cambiano da soli */
.mv .vic{fill:var(--vicini);fill-opacity:1;stroke:var(--vicini-bordo);stroke-width:1.2;stroke-dasharray:4 4}
.mv .on-rilievo .vic{fill-opacity:.72}
.mv .com{stroke:var(--comune-bordo);stroke-width:.8;fill-opacity:1}
.mv .com.pg{fill:var(--pg)} .mv .com.tr{fill:var(--tr)}
.mv .no-province .com{fill-opacity:0;stroke:var(--umbria-bordo);stroke-opacity:.35;stroke-width:.6}
.mv .on-rilievo:not(.no-province) .com{fill-opacity:.55}
.mv .confine-umbria{fill:none;stroke:var(--umbria-bordo);stroke-width:1.8}
.mv .confine-prov{fill:none;stroke:var(--umbria-bordo);stroke-width:1;stroke-dasharray:2 3;stroke-opacity:.8}
.mv .lago{fill:var(--acqua);fill-opacity:1;stroke:var(--acqua-linea);stroke-width:.6}
.mv .fiume{fill:none;stroke:var(--acqua-linea);stroke-width:1.3;stroke-linecap:round}
.mv .m3 .fiume,.mv .m4 .fiume{stroke-width:2}
.mv .rilievo-img{-webkit-mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent),linear-gradient(to bottom,transparent,#000 5%,#000 95%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent),linear-gradient(to bottom,transparent,#000 5%,#000 95%,transparent);mask-composite:intersect}
.mv .anello{fill:none;stroke:var(--anello);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round;transition:stroke-opacity .2s}
.mv .m2 .anello{stroke-width:2.3} .mv .m3 .anello{stroke-width:2.8} .mv .m4 .anello{stroke-width:3.2}
.mv .vista-paesaggio .anello.collina{stroke:var(--collina)}
.mv .vista-paesaggio .anello.montagna{stroke-width:2.4} .mv .vista-paesaggio.m2 .anello.montagna{stroke-width:3.1}
.mv .vista-paesaggio.m3 .anello.montagna,.mv .vista-paesaggio.m4 .anello.montagna{stroke-width:3.8}
.mv .alone-sella{fill:none;stroke:var(--mezzeria);stroke-width:6;stroke-linejoin:round;stroke-linecap:round;stroke-opacity:.9}
.mv .m3 .alone-sella,.mv .m4 .alone-sella{stroke-width:9}
.mv .vista-paesaggio .alone-sella{stroke-opacity:.6}
.mv .sel .anello,.mv .sel .alone-sella{stroke-opacity:.18}
.mv .anello.sopra{stroke:var(--rocca)!important;stroke-opacity:1!important}
.mv .acceso{fill:none;stroke:var(--rocca);stroke-width:4.5;stroke-linejoin:round;stroke-linecap:round}
.mv .m3 .acceso,.mv .m4 .acceso{stroke-width:5.5}
.mv .acceso-alone{fill:none;stroke:var(--alone);stroke-width:9;stroke-linejoin:round;stroke-opacity:.9}
.mv .m3 .acceso-alone,.mv .m4 .acceso-alone{stroke-width:11}
.mv .partenza{fill:var(--fg);fill-opacity:1;stroke:var(--alone);stroke-width:1.5}
.mv .partenza.in-sella{fill:var(--mezzeria);stroke:var(--fg)}
.mv .sel .partenza{fill-opacity:.25;stroke-opacity:.25}
.mv .sel .partenza.scelta{fill:var(--rocca);fill-opacity:1;stroke-opacity:1}
.mv .tappa{fill:var(--alone);fill-opacity:1;stroke:var(--tappa);stroke-width:1.4}
.mv .sel .tappa{stroke-opacity:.3;fill-opacity:.3}
.mv .presa{stroke:#000;stroke-opacity:0;fill:none;stroke-width:14}

/* etichette (le decide lo zoom: classi m1..m4 sulla scatola) */
.mv .etich{pointer-events:none}
.mv .etich span{position:absolute;white-space:nowrap;font:600 .78rem/1 var(--f-ui);color:var(--fg);text-shadow:0 0 2px var(--alone),0 0 3px var(--alone),0 0 4px var(--alone),0 0 6px var(--alone)}
.mv .etich-nome span{left:7px;top:-.5em}
.mv .etich-tappa span{left:5px;top:-.5em;font-weight:400;font-size:.72rem;color:var(--fg-2)}
.mv .etich-zona span{transform:translate(-50%,-50%);font:700 .86rem/1 var(--f-display);letter-spacing:.2em;text-transform:uppercase;color:var(--fg-2)}
.mv .etich-regione span{transform:translate(-50%,-50%);font:700 1rem/1 var(--f-display);letter-spacing:.32em;text-transform:uppercase;color:var(--fg-2);opacity:.75}
.mv .etich-lago span{transform:translate(-50%,-50%);font:italic 400 .74rem/1 var(--f-read);color:var(--acqua-linea);text-shadow:0 0 3px var(--alone),0 0 5px var(--alone)}
.mv .vetta{pointer-events:none}
.mv .vetta i{position:absolute;left:-6px;top:-9px;font:normal 600 .8rem/1 var(--f-ui);color:var(--vetta);text-shadow:0 0 3px var(--alone),0 0 4px var(--alone)}
.mv .m1 .vetta span,.mv .m2 .vetta span{display:none}
.mv .vetta span{position:absolute;left:8px;top:-.55em;white-space:nowrap;font:600 .72rem/1 var(--f-ui);color:var(--vetta);text-shadow:0 0 2px var(--alone),0 0 4px var(--alone),0 0 6px var(--alone)}
.mv .badge-avv{cursor:pointer}
.mv .badge-avv span{position:absolute;left:3px;top:-17px;min-width:16px;height:16px;padding:0 3px;border-radius:8px;background:var(--spia-ambra);color:#16181B;font:600 .68rem/16px var(--f-ui);text-align:center;box-shadow:0 0 0 1.5px var(--alone)}
.mv .sel .badge-avv{opacity:.25}
.mv .cippo{pointer-events:none}
.mv .cippo span{position:absolute;transform:translate(-50%,-115%);display:grid;justify-items:center;background:var(--mezzeria);color:#16181B;border:1.5px solid #16181B;border-radius:5px 5px 2px 2px;padding:.12rem .3rem .08rem;line-height:1;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.mv .cippo span b{font:700 .78rem/1 var(--f-display)}
.mv .cippo span small{font:600 .5rem/1 var(--f-ui);letter-spacing:.08em}
.mv .m1 .cippo span em,.mv .m2 .cippo span em,.mv .cippo span.corto em{display:none}
.mv .cippo span em{font:600 .66rem/1 var(--f-ui);font-style:normal;white-space:nowrap;margin-top:.1rem}
.mv .qui{pointer-events:none}
.mv .qui span{position:absolute;left:-9px;top:-9px;width:18px;height:18px;border-radius:50%;background:var(--spia-blu);box-shadow:0 0 0 3px var(--alone),0 0 0 9px rgba(63,140,255,.25)}

/* scheda del giro scelto */
.mv .scheda{position:absolute;z-index:1150;top:.8rem;right:.8rem;width:min(340px,calc(100% - 1.6rem));background:var(--bg);color:var(--fg);border:1px solid var(--linea);border-radius:12px;box-shadow:var(--ombra);padding:.85rem .95rem .9rem;display:grid;gap:.45rem}
.mv .scheda[hidden]{display:none}
.mv .scheda .chiudi{position:absolute;top:.35rem;right:.35rem;width:40px;height:40px;border-radius:50%;border:0;background:transparent;font-size:1.4rem;line-height:1;cursor:pointer;color:var(--fg-2)}
.mv .scheda h2{font-size:1.35rem;text-transform:uppercase;padding-right:2.2rem}
.mv .scheda .tit{font-family:var(--f-read);font-size:1rem;margin:0;color:var(--fg)}
.mv .scheda .numeri{display:flex;flex-wrap:wrap;gap:.3rem .8rem;font:600 .86rem/1.2 var(--f-ui);color:var(--fg-2);margin:0}
.mv .scheda .numeri b{color:var(--fg)}
.mv .scheda .avv{margin:0;font-size:.86rem;background:color-mix(in srgb,var(--spia-ambra) 18%,var(--bg));border-left:4px solid var(--spia-ambra);padding:.4rem .55rem;border-radius:4px}
.mv .bollino{justify-self:start;margin-right:2.4rem;font:600 .72rem/1 var(--f-ui);letter-spacing:.06em;text-transform:uppercase;background:var(--mezzeria);color:#16181B;padding:.3rem .5rem;border-radius:4px}
.mv .scheda .azioni{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.2rem}
.mv .scheda .btn{padding:.7rem .9rem;min-height:44px}
.mv .scheda ol{margin:0;padding-left:1.2rem;font-size:.9rem}
.mv .scheda ol .btn{padding:.45rem .7rem;min-height:40px;margin:.2rem 0}

/* il pannello: le spie (versione 1) */
.mv .pannello{position:absolute;z-index:1100;color:var(--su-asfalto);top:.8rem;left:.8rem;width:300px;max-height:calc(100% - 1.6rem);overflow:auto;background:var(--asfalto);border-radius:14px;padding:.9rem;box-shadow:var(--ombra);display:grid;gap:.8rem;align-content:start}
.mv .pannello .etichetta{font:600 .68rem/1 var(--f-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--su-asfalto-2);margin:0}
.mv .p-corpo{display:grid;gap:.75rem}
.mv .maniglia{display:none}
.mv .solo-viaggio{display:none!important}
.mv .vista-viaggio .solo-viaggio{display:inline-flex!important}
.mv .legenda{display:grid;gap:.35rem;font:400 .8rem/1.2 var(--f-ui);color:var(--su-asfalto)}
.mv .legenda span{display:flex;align-items:center;gap:.5rem}
.mv .legenda svg{flex:none;width:26px;height:14px}
.mv .crediti{display:none;font-size:.7rem;color:var(--su-asfalto-2);margin:0}
.mv .dove{gap:.45rem;align-items:center;justify-content:center;font:700 .9rem/1 var(--f-display);letter-spacing:.08em;text-transform:uppercase;border-radius:8px;padding:.7rem .8rem;min-height:44px;cursor:pointer;border:1px solid var(--spia-blu);background:transparent;color:var(--su-asfalto)}
.mv .dove i{width:.6rem;height:.6rem;border-radius:50%;background:var(--spia-blu);box-shadow:0 0 8px var(--spia-blu)}
.mv .ritorno{font:600 .8rem/1 var(--f-ui);background:none;border:none;color:var(--su-asfalto-2);text-decoration:underline;cursor:pointer;padding:.5rem 0;justify-self:start;min-height:44px}
.mv .modi{display:grid;grid-template-columns:repeat(3,1fr);gap:.35rem;background:var(--asfalto-2);padding:.3rem;border-radius:10px}
.mv .modo{border:0;border-radius:7px;background:transparent;color:var(--su-asfalto-2);padding:.55rem .3rem .5rem;cursor:pointer;display:grid;gap:.2rem;justify-items:center;min-height:44px}
.mv .modo b{font:700 1rem/1 var(--f-display);letter-spacing:.08em;text-transform:uppercase}
.mv .modo small{font:400 .64rem/1.15 var(--f-ui);text-align:center}
.mv .modo[aria-pressed="true"]{background:var(--mezzeria);color:#16181B}
.mv .griglia-spie{display:grid;grid-template-columns:1fr 1fr;gap:.4rem}
.mv .spia{display:flex;align-items:center;gap:.5rem;font:600 .82rem/1.1 var(--f-ui);padding:.55rem .6rem;min-height:44px;border-radius:999px;border:1px solid var(--asfalto-3);background:var(--asfalto-2);color:var(--su-asfalto-2);cursor:pointer;text-align:left}
.mv .spia i{flex:none;width:.6rem;height:.6rem;border-radius:50%;background:var(--asfalto-3);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.mv .spia[aria-pressed="true"]{color:var(--su-asfalto);border-color:var(--su-asfalto-2)}
.mv .spia[aria-pressed="true"] i{background:var(--c);box-shadow:0 0 8px var(--c)}
.mv .vai{display:grid;gap:.4rem}
.mv .vai select{font:600 .9rem/1.2 var(--f-ui);color:var(--su-asfalto);background:var(--asfalto-2);border:1px solid var(--asfalto-3);border-radius:8px;padding:.6rem .7rem;min-height:44px;width:100%}
.mv .dettaglio{display:grid;grid-template-columns:auto 1fr;gap:.35rem .6rem;align-items:center;background:var(--asfalto-2);border-radius:10px;padding:.6rem .7rem}
.mv .ledbar{display:grid;grid-template-columns:repeat(4,1fr);gap:3px}
.mv .ledbar b{height:8px;border-radius:2px;background:var(--asfalto-3)}
.mv .ledbar b.on{background:var(--spia-verde);box-shadow:0 0 6px var(--spia-verde)}
.mv .dettaglio p{grid-column:1/-1;margin:0;font:600 .86rem/1.25 var(--f-ui);color:var(--su-asfalto)}
.mv .dettaglio p small{display:block;font-weight:400;color:var(--su-asfalto-2);font-size:.74rem;margin-top:.15rem}
.mv .in-vista{font:700 1.5rem/1 var(--f-display);color:var(--mezzeria);font-variant-numeric:tabular-nums}

/* telefono: il pannello sale dal basso */
@media (max-width:760px){
  .mv .mappa-box{height:80vh;min-height:520px;border-radius:12px}
  .mv .pannello{top:auto;left:0;right:0;bottom:0;width:auto;max-height:80%;border-radius:16px 16px 0 0;overflow:hidden;display:flex;flex-direction:column;padding:0;transform:translateY(calc(100% - var(--testa-h,120px)));transition:transform .3s ease}
  .mv .pannello.aperto{transform:none;z-index:1200}
  .mv .p-testa{flex:none;padding:.35rem .8rem .7rem;display:grid;gap:.1rem}
  .mv .p-corpo{overflow:auto;padding:0 .8rem 1rem;-webkit-overflow-scrolling:touch;flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:.75rem}
  .mv .p-corpo>*{flex:none}
  .mv .p-corpo>.ritorno{align-self:flex-start}
  .mv .maniglia{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;border:0;background:transparent;color:inherit;font:600 .74rem/1 var(--f-ui);letter-spacing:.12em;text-transform:uppercase;padding:1rem 0 .55rem;cursor:pointer;min-height:40px;opacity:.85;position:relative}
  .mv .maniglia::before{content:"";width:40px;height:4px;border-radius:2px;background:currentColor;opacity:.5;position:absolute;top:6px;left:50%;margin-left:-20px}
  .mv .crediti{display:block}
  .mv .leaflet-control-attribution{display:none}
  .mv .leaflet-bottom{bottom:auto;top:0}
  .mv .scheda{top:.5rem;left:.5rem;right:3.6rem;width:auto;max-height:42%;overflow:auto;padding:.6rem .7rem .7rem;gap:.3rem}
  .mv .scheda h2{font-size:1.12rem}
  .mv .scheda .tit{font-size:.92rem}
  .mv .scheda .numeri{font-size:.8rem}
  .mv .scheda .btn{min-height:40px;padding:.5rem .7rem}
}
@media (prefers-reduced-motion:reduce){.mv *{transition:none!important}}
:root[data-movimento="ridotto"] .mv *{transition:none!important}