:root{
  --fondo:#0d1117; --panel:#161b22; --borde:#30363d;
  --texto:#e6edf3; --suave:#8b949e; --oro:#e3b341; --activo:#2f81f7;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
     background:var(--fondo);color:var(--texto);overflow:hidden}
#mapa{position:fixed;inset:0;z-index:1;background:#000}

#btnPanel{position:fixed;top:12px;left:12px;z-index:1000;width:44px;height:44px;
  border:1px solid var(--borde);border-radius:10px;background:var(--panel);
  color:var(--texto);font-size:20px;cursor:pointer}

#panel{position:fixed;top:0;left:0;bottom:0;width:320px;max-width:86vw;z-index:999;
  background:var(--panel);border-right:1px solid var(--borde);padding:68px 18px 24px;
  overflow-y:auto;transform:translateX(-100%);transition:transform .25s ease}
#panel.abierto{transform:translateX(0)}

#panel header{margin-bottom:18px}
#panel h1{font-size:17px;font-weight:600;color:var(--oro)}
#panel header p{font-size:12px;color:var(--suave);margin-top:2px}

label{display:block;font-size:12px;color:var(--suave);margin:14px 0 6px;
  text-transform:uppercase;letter-spacing:.04em}
select,input[type=range]{width:100%}
select{background:#0d1117;color:var(--texto);border:1px solid var(--borde);
  border-radius:8px;padding:10px;font-size:14px}
input[type=range]{accent-color:var(--activo);margin-top:4px}
.fila{display:flex;gap:10px}
.fila>div{flex:1}

button.primario,#btnZonas,#btnKml{width:100%;margin-top:16px;padding:12px;
  border:1px solid var(--borde);border-radius:9px;background:#21262d;
  color:var(--texto);font-size:14px;font-weight:500;cursor:pointer}
button.primario{background:var(--activo);border-color:var(--activo);color:#fff}
#btnKml{background:#1f6f3f;border-color:#1f6f3f;color:#fff}
button:active{opacity:.8}

hr{border:0;border-top:1px solid var(--borde);margin:22px 0 4px}

#resultado{margin-top:16px;font-size:13px;line-height:1.7}
#resultado .item{display:flex;justify-content:space-between;
  border-bottom:1px solid #21262d;padding:5px 0}
#resultado .item b{color:var(--oro);font-weight:600}
#resultado .aviso{color:#f85149}

.nota{margin-top:22px;font-size:11px;color:var(--suave);line-height:1.6;
  border-left:2px solid var(--oro);padding-left:10px}

#cargando{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:1200;
  background:var(--panel);border:1px solid var(--borde);border-radius:24px;
  padding:10px 18px;display:flex;align-items:center;gap:10px;font-size:13px}
.spinner{width:16px;height:16px;border:2px solid var(--borde);
  border-top-color:var(--activo);border-radius:50%;animation:giro .8s linear infinite}
@keyframes giro{to{transform:rotate(360deg)}}
.oculto{display:none!important}
.leaflet-container{background:#000}

label.check{display:flex;align-items:center;gap:9px;text-transform:none;
  letter-spacing:0;font-size:13px;color:var(--texto);margin:9px 0;cursor:pointer}
label.check input{width:16px;height:16px;accent-color:var(--oro);margin:0}
#btnLibres{background:#5a3d0a;border-color:#8a6416;color:#ffd97a}
.chip{display:inline-block;font-size:11px;padding:2px 8px;border-radius:20px;margin-top:4px}
.chip.libre{background:#12331c;color:#3fb950;border:1px solid #2ea043}
.chip.ocupado{background:#3a1214;color:#f85149;border:1px solid #da3633}