:root{--disp:#3fae29;--vend:#d64545;--rese:#e6a817;--ink:#1d2433;--mut:#6b7280;--acc:#f26a21;--bg:#f5f7fa}
*{box-sizing:border-box}
html,body{margin:0;height:100%;font-family:system-ui,Segoe UI,Roboto,sans-serif;color:var(--ink)}
body{display:flex}
#panel{width:380px;max-width:100%;height:100%;display:flex;flex-direction:column;background:#fff;box-shadow:2px 0 12px rgba(0,0,0,.15);z-index:1000}
#map{flex:1;height:100%}
#head{background:linear-gradient(135deg,#1d2433,#34425e);color:#fff;padding:16px 18px}
.brand{font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;opacity:.8}
.brand .logo{max-height:44px;max-width:200px;display:block;background:#fff;border-radius:8px;padding:5px 8px}
.marca-agua{filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 6px rgba(255,255,255,.8))}
#head h1{margin:4px 0 2px;font-size:1.4rem}
#head p{margin:0;opacity:.8;font-size:.9rem}
.btn-ir{display:block;margin-top:14px;text-align:center;background:#1a73e8;color:#fff;text-decoration:none;font-weight:600;border-radius:6px;padding:10px}
.btn-ir:hover{background:#1765cc}
.stats{display:flex;gap:24px;margin-top:12px}
.stats div{display:flex;flex-direction:column}
.stats b{font-size:1.4rem}
.stats span{font-size:.7rem;text-transform:uppercase;opacity:.75}
.filtros{padding:12px 16px;border-bottom:1px solid #e5e7eb;display:flex;flex-wrap:wrap;gap:6px 14px;font-size:.9rem}
.chk{display:flex;align-items:center;gap:5px;cursor:pointer}
.disp input{accent-color:var(--disp)}.vend input{accent-color:var(--vend)}.rese input{accent-color:var(--rese)}
.extra{width:100%;display:flex;gap:14px;flex-wrap:wrap;color:var(--mut);font-size:.85rem}
.count{padding:8px 16px;font-size:.8rem;color:var(--mut);font-style:italic}
#lista{flex:1;overflow:auto;padding:0 12px 12px;background:var(--bg)}
.card{background:#fff;border-radius:8px;padding:10px 12px;margin-top:10px;border:1px solid #e5e7eb;cursor:pointer}
.card:hover,.card.sel{border-color:var(--acc)}
.card .top{display:flex;justify-content:space-between;font-size:.8rem;color:var(--mut)}
.card .lote{font-weight:700;font-size:1.05rem;margin:2px 0}
.card .precio{font-size:.9rem;color:var(--mut)}.card .precio b{color:var(--acc)}
.tag{text-transform:capitalize;font-size:.7rem;font-weight:600;color:#fff;border-radius:10px;padding:1px 9px}
.tag.disponible{background:var(--disp)}.tag.vendido{background:var(--vend)}.tag.reservado{background:var(--rese)}
.btn-wa{display:block;text-align:center;background:#25d366;color:#fff!important;text-decoration:none;font-weight:600;border-radius:6px;padding:8px;margin-top:8px}
.leaflet-popup-content{margin:12px 14px;min-width:210px}
.pop .mz{font-size:.75rem;color:var(--mut);text-transform:uppercase}
.pop .ln{font-size:1.5rem;font-weight:800;margin:0 0 4px}
.pop dl{margin:6px 0;display:grid;grid-template-columns:auto 1fr;gap:2px 10px;font-size:.88rem}
.pop dt{color:var(--mut)}.pop dd{margin:0;font-weight:600}
.lbl{background:none;border:none;box-shadow:none;font-weight:700;font-size:11px;color:#fff;text-shadow:0 0 3px #000}
.lbl:before{display:none}
.mz-num span{position:absolute;transform:translate(-50%,-50%);font-size:var(--mz,64px);font-weight:800;line-height:1;color:#374151;opacity:.8;-webkit-text-stroke:2px #fff;paint-order:stroke fill;
 pointer-events:none}
#toggle{display:none}
@supports(height:100dvh){html,body{height:100dvh}}
@media(max-width:760px){
 html,body{overflow:hidden}
 body{position:fixed;inset:0;display:block}
 #map{position:absolute;inset:0;width:100%;height:100%}
 /* hoja inferior: toda la hoja se desplaza, asi la lista siempre es accesible */
 #panel{position:fixed;z-index:1100;left:0;right:0;bottom:0;width:100%;height:75vh;height:75dvh;border-radius:16px 16px 0 0;
  overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;display:block;
  transform:translateY(110%);transition:transform .25s;box-shadow:0 -4px 16px rgba(0,0,0,.3)}
 #panel.open{transform:none}
 #head{padding:12px 16px;display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:center}
 #head>*{grid-column:1/-1}
 .brand .logo{max-height:34px}
 #head h1{font-size:1.15rem;margin:2px 0 0}
 #head p{font-size:.8rem}
 .stats{grid-column:1;margin-top:8px;gap:16px}
 .stats b{font-size:1.15rem}
 .btn-ir{grid-column:2;grid-row:4;margin-top:8px;padding:9px 12px;font-size:.9rem;white-space:nowrap}
 .filtros{position:sticky;top:0;background:#fff;z-index:2;padding:10px 14px}
 #lista{overflow:visible;flex:none;padding-bottom:90px}
 #toggle{display:block;position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:1200;
  font:600 1rem system-ui,sans-serif;padding:12px 22px;border:0;border-radius:26px;background:#1d2433;color:#fff;box-shadow:0 2px 10px rgba(0,0,0,.4)}
 .leaflet-bottom{bottom:60px}
}