:root{--grafite:#22282E;--accento:#2BB673;--grigio:#79828A;--bordo:#dde1e4;}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font:14px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
color:var(--grafite);background:#fbfcfc;display:flex;flex-direction:column}
header{padding:12px 20px;border-bottom:1px solid var(--bordo);background:#fff;
display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;flex:0 0 auto}
h1{font-size:16.5px;margin:0;font-weight:600;letter-spacing:-.2px}
header .sub{color:var(--grigio);font-size:12px}
.controlli{margin-left:auto;display:flex;gap:9px;align-items:center;flex-wrap:wrap}
input,select{padding:6px 9px;border:1px solid var(--bordo);border-radius:5px;
font-size:12.5px;font-family:inherit;background:#fff}
#cerca{width:180px}
#metrica{max-width:330px}
#linkFonti{color:var(--accento);font-size:12px;text-decoration:none;white-space:nowrap}
#linkFonti:hover{text-decoration:underline}
table.dati small{color:var(--grigio);font-size:10.5px}
.legenda{max-width:270px}
#legEt{margin-bottom:2px}
#cerca:focus,select:focus{outline:2px solid var(--accento);outline-offset:-1px}
#briciole{padding:8px 20px;border-bottom:1px solid var(--bordo);background:#fff;
font-size:13px;display:flex;align-items:center;gap:7px;flex-wrap:wrap;flex:0 0 auto}
#briciole a{color:var(--accento);cursor:pointer;text-decoration:none}
#briciole a:hover{text-decoration:underline}
#briciole .sep{color:var(--grigio)}
#briciole .hint{color:var(--grigio);margin-left:6px;font-size:12px}
#wrap{display:flex;flex:1 1 auto;min-height:0}
#mappa{flex:1;position:relative;overflow:hidden;min-width:0}
svg{width:100%;height:100%;display:block;cursor:grab;touch-action:none}
path.area{stroke:#fff;stroke-width:.6;stroke-linejoin:round}
path.area:hover{stroke:#111;stroke-width:1.5}
path.area.sel{stroke:#111;stroke-width:2}
#lato{width:320px;flex:0 0 320px;border-left:1px solid var(--bordo);background:#fff;
overflow-y:auto;padding:16px 18px}
#tip{position:absolute;pointer-events:none;background:rgba(255,255,255,.97);
border:1px solid var(--bordo);border-radius:6px;padding:8px 10px;font-size:12.5px;
box-shadow:0 3px 12px rgba(0,0,0,.13);display:none;max-width:250px;z-index:5}
#tip b{display:block;margin-bottom:3px;font-size:13.5px}
#tip .r{display:flex;justify-content:space-between;gap:12px;color:#444}
#tip .r i{font-style:normal;color:var(--grigio)}
#tip .r.cat{display:block;color:#B06A00;margin-top:4px}
#stato{position:absolute;top:12px;left:50%;transform:translateX(-50%);background:#fff;
border:1px solid var(--bordo);border-radius:20px;padding:6px 14px;font-size:12.5px;
box-shadow:0 2px 10px rgba(0,0,0,.1);display:none;z-index:6}
#stato.err{border-color:#E5A823;background:#FEF6E7}
.legenda{position:absolute;left:16px;bottom:16px;background:rgba(255,255,255,.95);
border:1px solid var(--bordo);border-radius:6px;padding:9px 11px;font-size:11.5px}
.barra{height:11px;width:190px;border-radius:2px;margin:5px 0 3px;
background:linear-gradient(90deg,#2E7D32,#F9E79F,#B03A2E)}
.scala{display:flex;justify-content:space-between;color:var(--grigio)}
.zoom{position:absolute;right:14px;top:14px;display:flex;flex-direction:column;gap:4px}
.zoom button{width:30px;height:30px;border:1px solid var(--bordo);background:#fff;
border-radius:5px;cursor:pointer;font-size:15px;line-height:1;color:var(--grafite)}
.zoom button:hover{background:#f3f5f6}
h2{font-size:15px;margin:0 0 3px}
.occhiello{color:var(--grigio);font-size:11.5px;text-transform:uppercase;
letter-spacing:.7px;margin-bottom:10px}
.grande{font-size:26px;font-weight:600;letter-spacing:-.5px}
.grande small{font-size:13px;color:var(--grigio);font-weight:400}
.sotto{color:var(--grigio);margin-bottom:14px}
table.dati{width:100%;border-collapse:collapse;margin-bottom:14px}
table.dati td{padding:4px 0;border-bottom:1px solid #f0f2f3;vertical-align:top}
table.dati td:last-child{text-align:right;font-variant-numeric:tabular-nums;
font-weight:500;white-space:nowrap}
table.dati td:first-child{color:var(--grigio)}
.avviso{background:#FEF6E7;border-left:3px solid #E5A823;padding:8px 10px;font-size:12px;
border-radius:0 4px 4px 0;margin-bottom:13px}
.nota{font-size:11.5px;color:var(--grigio);border-top:1px solid var(--bordo);
padding-top:11px;margin-top:6px}
.condividi{margin-top:14px;font-size:11.5px;color:var(--grigio)}
.condividi code{display:block;background:#f4f6f7;padding:6px 8px;border-radius:4px;
margin-top:4px;word-break:break-all;color:var(--grafite);font-size:11px}
@media(max-width:880px){#wrap{flex-direction:column}#lato{width:100%;flex:0 0 auto;
border-left:none;border-top:1px solid var(--bordo)}#mappa{height:58vh;flex:0 0 auto}
.controlli{width:100%}#cerca{flex:1}}