/* Listado de propiedades con mapa (propiedades.php) */
body{background:var(--bg)}
.grow{flex:1}
.fbar{position:sticky;top:calc(68px + env(safe-area-inset-top,0px));z-index:40;background:#fff;border-bottom:1px solid #ECE7DD}
.fwrap{max-width:1600px;margin:0 auto;padding:12px clamp(16px,3vw,40px);display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.seg2{display:flex;padding:3px;border:1px solid var(--line);border-radius:22px}
.seg2 button{height:36px;padding:0 14px;border:0;border-radius:18px;background:none;font-size:14px;font-weight:600;color:var(--muted);cursor:pointer}
.seg2 button[aria-pressed="true"]{background:var(--dark);color:#fff}
.fsel{height:42px;padding:0 34px 0 14px;border:1px solid var(--line);border-radius:21px;background:#fff;font-size:14px;font-weight:600;cursor:pointer;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23202123' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
/* Cada desplegable mide lo que muestra (no lo que mide su opción más larga): field-sizing donde existe,
   y js/buscador.js le pone el ancho en el resto de los navegadores */
.fsel{field-sizing:content;max-width:240px;text-overflow:ellipsis}
.fsel:hover,.fbtn:hover{border-color:var(--ink)}
.fprice{position:relative;display:flex;align-items:center;gap:6px;height:42px;padding:0 14px;border:1px solid var(--line);border-radius:21px;background:#fff}
.plab{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-right:4px}
.fprice input{width:76px;border:0;background:transparent;font-size:14px;font-weight:600}
.fprice input:focus{outline:none}
.fprice input::placeholder{color:#9A938A;font-weight:500}
.fprice .pop{left:-1px;top:calc(100% + 8px);width:320px}
.fbtn{height:42px;padding:0 16px;border:1px solid var(--line);border-radius:21px;background:#fff;font-size:14px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.fbtn.save{border-color:transparent}
.fbtn.save:hover{border-color:var(--line)}
#moreN:not(:empty){background:var(--dark);color:#fff;border-radius:10px;font-size:11px;padding:1px 7px}
.morePanel{border-top:1px solid #F0ECE4}
.mlab{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-right:6px}
.chk{position:relative}
.chk input{position:absolute;opacity:0;inset:0;cursor:pointer}
.chk span{display:inline-flex;align-items:center;height:36px;padding:0 14px;border:1px solid var(--line);border-radius:18px;font-size:13px;font-weight:600;background:#fff;cursor:pointer}
.chk input:checked+span{background:var(--dark);border-color:var(--dark);color:#fff}
.chk input:focus-visible+span{outline:2px solid #C9C43A;outline-offset:2px}
.clear{border:0;background:none;font-size:13px;font-weight:600;text-decoration:underline;cursor:pointer;margin-left:6px}

/* ===== Resultados a todo el ancho y mapa desplegable (diseño v2, _diseno/v2/propiedades.html) ===== */
.rgrid{max-width:1360px;margin:0 auto}
.rlist{padding:28px clamp(16px,3vw,40px) 60px}
.rhead{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:22px}
.rhead h1{font-size:clamp(28px,2.6vw,38px)}
.rcount{margin:6px 0 0;color:var(--muted);font-size:14px}
.rtools{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.sortl{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.sortl select{height:38px;border:1px solid var(--line);border-radius:19px;padding:0 12px;background:#fff;font-size:14px;font-weight:600;color:var(--ink)}
.rlist .cards{grid-template-columns:repeat(3,minmax(0,1fr))}

/* Panel del mapa: se abre desde "Ver en el mapa" (js/propiedades.js), debajo del cabezal, con fondo oscurecido */
.rmap{position:fixed;top:68px;right:0;bottom:0;width:min(760px,62vw);z-index:70;background:var(--bg);display:flex;flex-direction:column;box-shadow:-24px 0 60px rgba(32,33,35,.18)}
.rmap[hidden]{display:none}
.mdback{position:fixed;top:68px;left:0;right:0;bottom:0;background:rgba(32,33,35,.28);z-index:69}
.mdback[hidden]{display:none}
.mdhead{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;border-bottom:1px solid #ECE7DD;background:#fff}
.mdhead b{font-family:var(--display);font-weight:400;font-size:20px;margin-right:10px}
.mdhead span{font-size:13px;color:var(--muted)}
.mdclose{width:40px;height:40px;border:1px solid var(--line);border-radius:20px;background:#fff;font-size:22px;line-height:1;cursor:pointer;color:var(--ink)}
.mdclose:hover{border-color:var(--ink)}
.mapwrap{flex:1;min-height:0;background:#D4E5EC}
.rmap .leaflet-tile-pane{filter:saturate(.55) sepia(.06) brightness(1.04)} /* colores suaves, como el mapa del diseño */
.maplab{padding:10px 20px;margin:0;background:#fff;border-top:1px solid #ECE7DD;font-size:12px;color:var(--muted)}
.mapToggle{display:none}

/* Tarjeta al tocar un precio del mapa */
.mpop{position:absolute;right:20px;bottom:64px;width:300px;background:#fff;box-shadow:0 14px 40px rgba(32,33,35,.22);display:flex;flex-direction:column;z-index:1001}
.mpop[hidden]{display:none}
.mpop img{width:100%;height:170px;object-fit:cover;display:block}
.mpop .mb{padding:14px 16px 16px;display:flex;flex-direction:column;gap:4px}
.mpop .mb b{font-size:19px}
.mpop .mb span{font-size:13.5px;color:var(--muted)}
.mpop .mb a{margin-top:8px;align-self:flex-start;font-size:14px;font-weight:600;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--yellow);padding-bottom:3px}
.mpop .mx{position:absolute;top:8px;right:8px;width:32px;height:32px;border-radius:16px;border:0;background:rgba(255,255,255,.95);cursor:pointer;font-size:18px;line-height:1}

@media (max-width:1100px){
  .rlist .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rmap{width:100%}
  .mdback{display:none!important}
  .mpop{left:12px;right:12px;width:auto;bottom:56px}
  .mpop img{height:140px}
  .mapToggle{display:inline-flex;position:fixed;left:50%;transform:translateX(-50%);bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:46;height:48px;padding:0 22px;border:0;border-radius:24px;background:var(--dark);color:#fff;font-weight:600;align-items:center;gap:8px;box-shadow:0 10px 30px rgba(0,0,0,.25);cursor:pointer}
  .fbar{position:static}
}
@media (max-width:700px){
  .rlist .cards{grid-template-columns:1fr}
  .fprice input{width:70px}
}

/* Precios sobre el mapa (Leaflet): negros con texto blanco; amarillos al pasar o al elegir uno */
.ppin-wrap{background:none;border:0}
.ppin{position:absolute;left:0;top:0;transform:translate(-50%,calc(-100% - 6px));display:block;white-space:nowrap;padding:4px 10px;border-radius:12px;background:#202123;font-family:var(--text);font-size:12px;font-weight:700;color:#fff;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.18);transition:background .2s,color .2s}
.ppin::after{content:"";position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);border:5px solid transparent;border-top-color:#202123;border-bottom:0}
.ppin:hover,.ppin.hl,.ppin.on{background:var(--yellow);color:#202123}
.ppin:hover::after,.ppin.hl::after,.ppin.on::after{border-top-color:#202123}
.mapwrap .leaflet-control-attribution{font-size:10px}
.maplab a{color:var(--ink);font-weight:600}

/* Precio de alquiler con su unidad ("USD 5.500 / Enero"), como en el diseño v2 */
.pc .pr small.from,.dprice small.from{font-size:13px;font-weight:500;color:var(--muted)}
.pc .pr small.unit,.dprice small.unit{font-size:14px;font-weight:500;color:var(--muted)}

/* Paginado (el diseño mostraba pocos resultados de ejemplo, sin páginas) */
.pager{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:32px}
.pnum{font-size:14px;color:var(--muted)}
a.fbtn{text-decoration:none;color:var(--ink)}

/* Mis favoritos y selección compartida */
.favacts{flex-wrap:wrap}
.fbtn:disabled{opacity:.6;cursor:default}
.pc .quitar{align-self:flex-start;margin:-8px 20px 18px;padding:0;border:0;background:none;font-size:13px;font-weight:600;color:var(--muted);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.pc .quitar:hover{color:var(--ink)}
.fbtn.save[aria-pressed="true"]{border-color:var(--ink);background:var(--dark);color:#fff}

/* Grupo de marcadores en el mapa (leaflet.markercluster) */
.pclus{position:absolute;left:0;top:0;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding:0 8px;border-radius:19px;background:var(--dark);color:#fff;border:2px solid #fff;box-shadow:0 3px 10px rgba(0,0,0,.25);font-family:var(--text);font-size:13px;font-weight:700;cursor:pointer;transition:transform .15s}
.pclus:hover{transform:translate(-50%,-50%) scale(1.08)}

/* Leaflet usa z-index altos (400 a 1000): el mapa se aísla dentro de su panel */
.mapwrap{position:relative;isolation:isolate;z-index:0}

/* "Avisame cuando entre algo así" (diseño v3) */
.alertpop{border:1px solid var(--line);background:#fff;padding:16px 18px;margin:0 0 18px}
.alertpop[hidden]{display:none}
.alertpop .alt{margin:0 0 10px;display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline}
.alertpop .alt span{font-size:13px;color:var(--muted)}
.alrow{display:flex;gap:8px}
.alrow input{flex:1;min-width:0;border:0;border-bottom:1px solid var(--line);padding:10px 2px;font:inherit;background:transparent}
.alrow input:focus{outline:none;border-bottom-color:var(--ink)}
.albtn{border:0;background:var(--dark);color:#fff;border-radius:999px;padding:10px 20px;font:inherit;font-weight:600;cursor:pointer}
.alfine{font-size:12px;color:var(--muted);margin:8px 0 0}
@media (max-width:700px){#saveSearch{white-space:normal;text-align:left;max-width:100%}}