:root{
  --fondo:#0e161d; --pannello:#17212b; --riga:#1e2b36; --bordo:#2a3a48;
  --testo:#e8eef3; --tenue:#8ba0b1; --debole:#5f7383;
  --ambra:#f0a020; --verde:#3fb27f; --rosso:#e2564a; --blu:#4a90c2;
  --barra:56px; --laterale:220px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{background:var(--fondo);color:var(--testo);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:15px;line-height:1.5}
.nascosto{display:none!important}
button{font:inherit;cursor:pointer;color:inherit}
a{color:var(--blu)}

/* ---------- accesso ---------- */
.accesso{max-width:380px;margin:14vh auto;padding:0 20px}
.accesso h1{font-size:24px;letter-spacing:.2em;font-weight:600;margin:0 0 4px}
.accesso h1 span{color:var(--ambra)}
.accesso p{color:var(--tenue);font-size:14px;margin:0 0 28px}
label{display:block;font-size:13px;color:var(--tenue);margin:14px 0 6px}
input,select{width:100%;padding:12px;font-size:16px;border-radius:9px;
  border:1px solid var(--bordo);background:var(--riga);color:var(--testo)}
input:focus,select:focus{outline:2px solid var(--ambra);outline-offset:1px;border-color:transparent}
.principale{width:100%;margin-top:22px;padding:14px;font-size:16px;font-weight:600;
  border:0;border-radius:9px;background:var(--ambra);color:#241a06}
.avviso{margin-top:16px;padding:12px 14px;border-radius:9px;font-size:14px;
  background:rgba(226,86,74,.14);border:1px solid rgba(226,86,74,.4);color:#ffb4ad}

/* ---------- impianto ---------- */
.telaio{display:flex;min-height:100vh}
.laterale{display:none}
.centro{flex:1;min-width:0;padding-bottom:calc(var(--barra) + env(safe-area-inset-bottom))}
.testata{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 16px;background:var(--pannello);border-bottom:1px solid var(--bordo);
  position:sticky;top:0;z-index:8}
.titolo-schermata{font-size:17px;font-weight:600}
.marchio{font-weight:600;letter-spacing:.18em;font-size:15px}
.marchio span{color:var(--ambra)}
.chi{font-size:12px;color:var(--tenue);text-align:right;line-height:1.35}
.corpo{padding:16px}

/* ---------- barra bassa (mobile) ---------- */
.barra{position:fixed;left:0;right:0;bottom:0;height:calc(var(--barra) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  display:flex;background:var(--pannello);border-top:1px solid var(--bordo);z-index:9}
.barra button{flex:1;border:0;background:none;color:var(--debole);font-size:11px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:0}
.barra button .segno{font-size:17px;line-height:1}
.barra button.scelto{color:var(--ambra)}

/* ---------- riquadri ---------- */
.griglia{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.riquadro{background:var(--pannello);border:1px solid var(--bordo);border-radius:12px;
  padding:13px 15px;text-align:left;width:100%}
.riquadro .numero{font-size:28px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1.15}
.riquadro .etichetta{font-size:11px;color:var(--tenue);text-transform:uppercase;
  letter-spacing:.08em;margin-top:3px}
.riquadro.attenzione .numero{color:var(--ambra)}
h2{font-size:12px;color:var(--tenue);text-transform:uppercase;letter-spacing:.1em;
  font-weight:600;margin:24px 0 10px}

/* ---------- elenchi ---------- */
.strumenti{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.strumenti input{flex:1;min-width:180px;padding:10px 12px;font-size:15px}
.strumenti select{width:auto;min-width:150px;padding:10px 12px;font-size:15px}
.conteggio{font-size:13px;color:var(--tenue);margin-bottom:10px}
.elenco{display:flex;flex-direction:column;gap:8px}
.voce{display:block;width:100%;text-align:left;background:var(--pannello);
  border:1px solid var(--bordo);border-radius:12px;padding:11px 13px}
.voce:hover{border-color:var(--debole)}
.voce .alto{display:flex;justify-content:space-between;align-items:center;gap:10px}
.voce .numero-lav{font-weight:600;font-size:15px;font-variant-numeric:tabular-nums}
.voce .cliente{font-size:15px;margin-top:3px}
.voce .sotto{font-size:13px;color:var(--tenue);margin-top:2px}
.pastiglia{font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  padding:3px 9px;border-radius:20px;white-space:nowrap}
.p-ods{background:rgba(74,144,194,.18);color:#93c4e6}
.p-vbs{background:rgba(240,160,32,.16);color:#f3bf6a}
.stato{font-size:12px;text-transform:uppercase;letter-spacing:.05em}
.s-aperto{color:#f3bf6a} .s-chiuso{color:#7fd0aa}
.s-non_lavorabile{color:#ffa79f} .s-sospeso{color:var(--tenue)}
.tabella{display:none}
.pagine{display:flex;gap:8px;align-items:center;justify-content:center;margin:18px 0 8px}
.secondario{background:none;border:1px solid var(--bordo);color:var(--tenue);
  border-radius:8px;padding:8px 13px;font-size:13px}
.secondario:disabled{opacity:.35;cursor:default}
.vuoto{color:var(--tenue);font-size:14px;padding:22px;text-align:center;
  border:1px dashed var(--bordo);border-radius:12px}

/* ---------- scheda ---------- */
.scheda{background:var(--pannello);border:1px solid var(--bordo);border-radius:12px;
  padding:14px 16px;margin-bottom:12px}
.scheda h3{font-size:12px;color:var(--tenue);text-transform:uppercase;letter-spacing:.09em;
  font-weight:600;margin:0 0 10px}
.campo{display:flex;justify-content:space-between;gap:14px;padding:6px 0;
  border-bottom:1px solid rgba(42,58,72,.5);font-size:14px}
.campo:last-child{border-bottom:0}
.campo .etic{color:var(--tenue);white-space:nowrap}
.campo .val{text-align:right;word-break:break-word}
.blocco-testo{font-size:14px;color:var(--testo);white-space:pre-wrap;word-break:break-word}
.indietro{margin-bottom:12px}
.evento{font-size:13px;color:var(--tenue);padding:5px 0}
.evento b{color:var(--testo);font-weight:500}

/* ---------- desktop ---------- */
@media (min-width:900px){
  .barra{display:none}
  .centro{padding-bottom:0}
  .laterale{display:flex;flex-direction:column;width:var(--laterale);flex:0 0 var(--laterale);
    background:var(--pannello);border-right:1px solid var(--bordo);
    position:sticky;top:0;height:100vh}
  .laterale .marchio{padding:18px 18px 14px;font-size:16px;border-bottom:1px solid var(--bordo)}
  .laterale nav{display:flex;flex-direction:column;padding:10px 8px;gap:2px}
  .laterale nav button{display:flex;align-items:center;gap:10px;border:0;background:none;
    color:var(--tenue);padding:10px 12px;border-radius:8px;font-size:14px;text-align:left;width:100%}
  .laterale nav button:hover{background:var(--riga);color:var(--testo)}
  .laterale nav button.scelto{background:var(--riga);color:var(--ambra);font-weight:600}
  .laterale .fondo{margin-top:auto;padding:14px}
  .corpo{padding:22px 26px}
  .griglia{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
  .elenco{display:none}
  .tabella{display:table;width:100%;border-collapse:collapse;
    background:var(--pannello);border:1px solid var(--bordo);border-radius:12px;overflow:hidden}
  .tabella th{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--tenue);
    text-align:left;padding:11px 12px;border-bottom:1px solid var(--bordo);font-weight:600}
  .tabella td{padding:10px 12px;border-bottom:1px solid rgba(42,58,72,.5);font-size:14px}
  .tabella tr:last-child td{border-bottom:0}
  .tabella tbody tr{cursor:pointer}
  .tabella tbody tr:hover{background:var(--riga)}
  .tabella .num{font-variant-numeric:tabular-nums;font-weight:600}
  .colonne-scheda{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
}

:root{ --bg-si:rgba(63,178,127,.16); --bg-no:rgba(226,86,74,.16); }
#fisarmonica-materiali .secondario{ padding:10px 12px; font-size:14px; }

.leaflet-container{ background:#0e161d; }
.leaflet-popup-content-wrapper,.leaflet-popup-tip{ background:var(--pannello); color:var(--testo);
  border:1px solid var(--bordo); }
.leaflet-popup-content{ font-size:13px; line-height:1.45; }
.leaflet-popup-content a{ color:var(--ambra); }
.leaflet-control-attribution{ background:rgba(23,33,43,.85)!important; color:var(--debole)!important; }
.leaflet-control-attribution a{ color:var(--tenue)!important; }
input[type=range]{ accent-color:var(--ambra); }