:root{
  --bordo:#d8dee6; --testo:#1d2530; --muto:#68758a;
  --accento:#1f5f8b; --accento-scuro:#164764; --sfondo:#f4f6f9;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  font:15px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--testo);background:var(--sfondo);
  display:flex;flex-direction:column;
}
header{
  background:#214d65;
  background-image:linear-gradient(rgba(0,20,35,.4),rgba(0,20,35,.4)),url('../images/sfondo-barra.jpg');
  background-size:cover;background-position:center 52%;background-repeat:no-repeat;
  border-bottom:1px solid var(--bordo);
  padding:.7rem 1rem;display:flex;align-items:baseline;gap:.9rem;flex-wrap:wrap;
}
header h1{margin:0;font-size:1.15rem;letter-spacing:.02em}
header p{margin:0;color:var(--muto);font-size:.85rem;flex:1}
header .titolo-mappa{color:#fff;font-weight:700;text-shadow:0 1px 3px #000}
header{align-items:center;flex-wrap:nowrap}
#menu-funzioni{position:relative;flex-shrink:0;z-index:20}
#menu-funzioni summary{list-style:none;display:grid;place-items:center;width:42px;height:42px;border:1px solid #8fa69a;border-radius:10px;background:#edf4eff5;color:#164a36;box-shadow:0 2px 8px #0003;cursor:pointer}
#menu-funzioni summary::-webkit-details-marker{display:none}
#menu-funzioni summary svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.funzioni-contenuto{position:absolute;left:0;top:50px;width:min(340px,calc(100vw - 32px));padding:14px;display:grid;gap:12px;background:#f7faf8;border:1px solid #8fa69a;border-radius:12px;box-shadow:0 3px 14px #0004}
.funzioni-contenuto .selettore-funzione{display:grid;gap:8px}
.funzioni-contenuto select{width:100%;min-width:0}
.funzioni-contenuto .stato{border-radius:6px;overflow-wrap:anywhere}
.funzioni-scelte{display:grid;gap:6px}
.funzioni-scelte button{text-align:left;white-space:normal;padding:10px 12px;background:transparent;color:var(--testo);border:1px solid transparent;border-radius:7px}
.funzioni-scelte button:hover,.funzioni-scelte button:focus-visible{background:#e1ece5;border-color:#8fa69a}
.funzioni-scelte button.active{background:#cfe0d5;color:#164a36;font-weight:600}
.selettore-funzione{display:flex;align-items:center;gap:.45rem;color:var(--muto);
  font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.selettore-funzione select{min-width:170px;padding:.3rem .45rem;border:1px solid var(--bordo);
  border-radius:6px;background:#fff;color:var(--testo);font:inherit;text-transform:none;letter-spacing:0}
.stato{font-size:.78rem;color:var(--muto);background:#eef2f7;
  border:1px solid var(--bordo);border-radius:99px;padding:.15rem .6rem}
.stato.lavoro{color:#8a5a00;background:#fff5e0;border-color:#f0d9a0}
.stato.errore{color:#8b1d1d;background:#fdecec;border-color:#f0bcbc}
.stato.ok{color:#1d6b3a;background:#e9f7ee;border-color:#b6e0c5}

main{flex:1;display:grid;grid-template-columns:1fr 400px;min-height:0}
main.modalita-solo-mappa{grid-template-columns:1fr}
@media(max-width:900px){main{grid-template-columns:1fr;grid-template-rows:55vh 1fr}}
@media(max-width:900px){main.modalita-solo-mappa{grid-template-rows:1fr}}

[hidden]{display:none!important}

#mappa-box{position:relative;min-height:0}
#mappa{position:absolute;inset:0}
#mappa .ol-zoom{top:8px;right:8px;left:auto;z-index:12}
#menu-misure{position:absolute;left:8px;top:8px;z-index:10}
#menu-stampa{position:absolute;left:8px;top:58px;z-index:10}
#scelta-stampa{position:absolute;top:0;left:50px;width:270px;max-width:calc(100vw - 78px);padding:12px;display:grid;gap:8px;background:#f7faf8;border:1px solid #8fa69a;border-radius:10px;box-shadow:0 3px 14px #0003;font-size:13px}
#scelta-stampa label{display:grid;grid-template-columns:92px 1fr;gap:8px;align-items:center}
#scelta-stampa select,#scelta-stampa input{width:100%}
#scelta-stampa output{display:block;text-align:center;color:var(--accento);font-weight:700}
.scale-labels{display:grid;grid-template-columns:repeat(8,1fr);gap:1px;font-size:8px;color:var(--muto);text-align:center}.scale-labels span{overflow:visible;white-space:nowrap;transform:rotate(-32deg);transform-origin:center top;height:25px}
#scelta-stampa small,#scelta-stampa p{margin:0;color:var(--muto)}
.stampa-azioni{display:flex;gap:6px}.stampa-azioni button{flex:1;padding:.4rem}
#scelta-misure{position:absolute;top:0;left:50px;width:250px;max-width:calc(100vw - 78px);max-height:calc(100vh - 180px);overflow:auto;padding:12px;display:grid;gap:8px;background:#f7faf8;border:1px solid #8fa69a;border-radius:10px;box-shadow:0 3px 14px #0003;font-size:13px}
#scelta-misure [aria-pressed="true"]{background:#cfe0d5;border-color:#164a36;color:#164a36;font-weight:bold}
#scelta-misure p{margin:0;color:var(--accento)}
#scelta-misure small{color:var(--muto)}
#scelta-misure .misure-azioni{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
#scelta-misure .misure-azioni button{display:grid;place-items:center;min-height:44px;padding:8px;color:#164a36}
#scelta-misure .misure-azioni svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cadastral-parcels-layer{filter:grayscale(1) brightness(1.08) contrast(1.05);background:#fff}
.cadastral-buildings-layer{filter:grayscale(1) brightness(1.28) contrast(.92)}
#menu-sfondi{position:absolute;left:12px;bottom:36px;z-index:9}
.map-basemap-button{width:42px;height:42px;padding:8px;border:1px solid #8fa69a;border-radius:10px;background:#f6faf7f5;color:#164a36;box-shadow:0 2px 8px #0003}
.map-basemap-button svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#scelta-sfondi{position:absolute;bottom:48px;left:0;width:230px;max-width:calc(100vw - 40px);padding:8px;display:grid;gap:5px;background:#edf4eff5;border:1px solid #8fa69a;border-radius:12px;box-shadow:0 3px 14px #0004;font-size:.85rem}
.sfondi-heading{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:0 4px}
.sfondi-heading button{border:0;background:transparent;font-size:1.3rem;padding:0 4px}
#scelta-sfondi label{display:flex;align-items:center;gap:.5rem;padding:8px;border-radius:6px;cursor:pointer}
#scelta-sfondi label.active{background:#cfe0d5;color:#164a36;font-weight:600}
.popup-vincolo{
  position:absolute;z-index:8;left:42px;top:10px;min-width:260px;
  width:min(390px,calc(100% - 300px));max-height:calc(100% - 20px);
  overflow:auto;background:rgba(255,255,255,.97);
  border:1px solid var(--bordo);border-radius:8px;padding:.75rem 2rem .75rem .8rem;
  box-shadow:0 4px 18px rgba(0,0,0,.24);font-size:.8rem
}
@media(max-width:700px){.popup-vincolo{left:35px;top:55px;width:calc(100% - 45px);max-height:calc(100% - 65px)}}
.popup-chiudi{position:absolute;right:.35rem;top:.25rem;border:0;background:transparent;
  padding:.1rem .35rem;font-size:1.25rem;line-height:1;color:var(--muto)}
.popup-vincolo h3{margin:0 0 .45rem;font-size:.9rem;color:var(--accento)}
.popup-vincolo h3:not(:first-child){margin-top:.8rem;padding-top:.65rem;border-top:1px solid var(--bordo)}
.popup-vincolo dl{display:grid;grid-template-columns:minmax(85px,auto) 1fr;gap:.2rem .65rem;margin:0}
.popup-vincolo dt{color:var(--muto);font-weight:600}
.popup-vincolo dd{margin:0;overflow-wrap:anywhere}
.popup-messaggio{margin:0;color:var(--muto);font-style:italic}
.fonte-vincolo{margin:.55rem 0 0;font-size:.72rem}
.fonte-vincolo a,.fonti-mappa a{color:var(--accento);text-decoration:underline}
.btn-approfondisci{width:100%;margin-top:.65rem;padding:.38rem .55rem;color:var(--accento);font-weight:600}
.norme-vincolo{margin-top:.65rem;border-top:1px solid var(--bordo);padding-top:.25rem}
.norme-vincolo h4{margin:.55rem 0 .12rem;font-size:.78rem;color:var(--accento-scuro)}
.norme-vincolo p{margin:0;color:var(--testo)}
.norme-vincolo .avviso-cartografia{margin-top:.75rem;padding:.5rem;background:#fff6df;border-left:3px solid #d69c28;color:#5f4a1d}
#barra{
  position:absolute;left:10px;bottom:10px;right:10px;z-index:5;
  display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;
  background:rgba(255,255,255,.94);border:1px solid var(--bordo);
  border-radius:8px;padding:.5rem .6rem;box-shadow:0 2px 8px rgba(0,0,0,.12)
}
#layers-box{
  position:absolute;right:10px;top:64px;z-index:5;
  background:rgba(255,255,255,.94);border:1px solid var(--bordo);
  border-radius:8px;padding:.5rem .7rem;box-shadow:0 2px 8px rgba(0,0,0,.12);
  display:flex;flex-direction:column;gap:.25rem;font-size:.85rem
}
#layers-box strong{font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muto)}
#layers-box hr{border:0;border-top:1px solid var(--bordo);margin:.35rem 0;width:100%}
#layers-box label{display:flex;align-items:center;gap:.35rem}
#menu-aree-protette{display:flex;flex-direction:column;gap:.25rem}
#layers-box{max-width:280px;max-height:calc(100% - 100px);overflow:auto}
.tema-agro{margin-top:.4rem}
.tema-agro label{align-items:flex-start!important}
.tema-agro input{flex-shrink:0}
.tema-agro details{margin:.2rem 0 .4rem 1.3rem;font-size:.72rem}
.tema-agro summary{cursor:pointer;color:var(--accento)}
.tema-agro img{display:block;max-width:100%;height:auto;margin:.4rem 0}
.tema-agro p{margin:.35rem 0}
.tema-agro a{color:var(--accento)}
.legenda-fasce{display:flex;flex-direction:column;gap:.2rem;margin:.25rem 0 0 .25rem;
  padding:.4rem 0 .15rem .55rem;border-left:2px solid var(--bordo);font-size:.68rem;max-width:220px}
.legenda-fasce strong{margin-top:.15rem;font-size:.64rem!important}
.legenda-fasce span{display:flex;align-items:center;gap:.35rem;line-height:1.2}
.campione{display:inline-block;flex:0 0 16px;width:16px;height:8px;border-radius:1px}
.fascia-corso{background:rgba(51,160,44,.55)}
.fascia-wise{background:rgba(1,164,245,.55)}
.bcaa-obbligo{height:4px;background:#e31a1c}
.bcaa-deroga{height:4px;background:#2020dc}
.bcaa-assolto{height:4px;background:#28df18}
.fonti-mappa{margin-top:.25rem;padding-top:.35rem;border-top:1px solid var(--bordo);max-width:230px}
.fonti-mappa summary{cursor:pointer;color:var(--muto);font-size:.75rem;font-weight:600}
.fonti-mappa a{display:block;margin-top:.3rem;font-size:.7rem;line-height:1.25}
.coord{font:12px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--muto)}

button{
  font:inherit;padding:.45rem .8rem;border-radius:6px;cursor:pointer;
  border:1px solid var(--bordo);background:#fff;color:var(--testo)
}
button:hover:not(:disabled){background:#eef2f7}
button:disabled{opacity:.45;cursor:not-allowed}
button.primario{background:var(--accento);border-color:var(--accento);color:#fff}
button.primario:hover:not(:disabled){background:var(--accento-scuro)}
button.largo{width:100%;padding:.6rem}
button.attivo{outline:2px solid var(--accento);outline-offset:1px}

#pannello{
  border-left:1px solid var(--bordo);background:#fff;
  padding:1rem;overflow:auto
}
#pannello-cultura{padding:1rem;background:white;overflow:auto;border-left:1px solid var(--bordo);font-size:.8rem}
#ricerca-catastale{padding:1rem;background:white;overflow:auto;border-left:1px solid var(--bordo);font-size:.85rem}
#ricerca-catastale h2{color:var(--accento)}
#ricerca-catastale label{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin:.6rem 0}
#ricerca-catastale select{width:65%;padding:.4rem}
#ricerca-catastale a{color:var(--accento)}
.cat-azioni{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0}
#cat-stato{padding:.6rem;background:#eef4f8;border-radius:4px}
#pannello-cultura h2{font-size:1rem;color:var(--accento)}
#pannello-cultura label{display:flex;gap:.4rem;margin-top:.7rem;align-items:flex-start}
#pannello-cultura details{margin:.2rem 0 .5rem 1.3rem}
#pannello-cultura > .gruppo-vincoli-tutele{margin:.6rem 0;border:1px solid var(--bordo);border-radius:8px;padding:.6rem}
#pannello-cultura > .gruppo-vincoli-tutele > summary{font-size:1rem;font-weight:700;padding:.25rem}
#pannello-cultura > .gruppo-vincoli-tutele > div{padding:.3rem}
#pannello-cultura #menu-aree-protette{padding:.4rem}
#pannello-cultura #menu-aree-protette > strong{display:none}
#pannello-cultura summary{cursor:pointer;color:var(--accento)}
#pannello-cultura img{max-width:100%;height:auto}
#pannello-cultura a{display:block;margin:.5rem 0;color:var(--accento)}
#pannello h2{font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muto);margin:1.2rem 0 .5rem;border-bottom:1px solid var(--bordo);padding-bottom:.3rem}
#pannello h2:first-child{margin-top:0}

table{width:100%;border-collapse:collapse;font-size:.85rem}
th,td{border-bottom:1px solid var(--bordo);padding:.4rem .3rem;text-align:left;vertical-align:top}
th{color:var(--muto);font-weight:600;font-size:.75rem;text-transform:uppercase}
.num{text-align:right}
td.num{font-variant-numeric:tabular-nums}
.vuoto{color:var(--muto);font-style:italic;text-align:center}
.pallino{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:.4rem}

form label{display:block;margin-bottom:.7rem;font-size:.8rem;color:var(--muto)}
form input,form textarea,form select{
  display:block;width:100%;margin-top:.2rem;padding:.4rem .5rem;
  font:inherit;font-size:.87rem;color:var(--testo);
  border:1px solid var(--bordo);border-radius:5px;background:#fff
}
form textarea{resize:vertical}
.nota{font-size:.75rem;color:var(--muto);margin:.6rem 0 0}
@media(max-width:600px){.popup-vincolo{min-width:230px;max-width:calc(100vw - 20px)}}