/* ============================================================
   PLP · PÁGINA DE PROPIEDADES
   Barra única de búsqueda + resultados + vista dividida con mapa.
   Prefijo propio .plp-* para no heredar de la barra de filtros anterior.

   Presupuesto vertical (desktop): header 68 + barra 61 + encabezado 50
   = 179px antes de la primera tarjeta. La card mide ~390px, así que una
   fila completa entra sin scroll en un portátil de 768px de alto.

   Depende de los tokens de marca definidos en style.css (:root).
   ============================================================ */

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ── Barra sticky ─────────────────────────────────────────────────────── */
/* --header-h la mide plp.js sobre el <nav> real: el header cambia de alto
   entre breakpoints y un 68px fijo dejaba la barra solapada 2px. */
#page-propiedades.pt-68 { padding-top: var(--header-h, 68px); }
.plp-bar {
  position: sticky; top: var(--header-h, 68px); z-index: 400;
  background: var(--white);
  border-bottom: 1px solid var(--neutral-200);
}
/* Con wrap siempre activo, un filtro de nombre largo empuja los controles a
   una segunda fila ordenada en lugar de estrujar el buscador. */
.plp-bar-inner {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 10px; row-gap: 10px;
  padding-top: 11px; padding-bottom: 11px;
}

/* ── Segmentado de operación ──────────────────────────────────────────── */
.plp-seg {
  display: flex; gap: 2px; flex-shrink: 0;
  padding: 3px;
  background: var(--neutral-100);
  border-radius: 12px;
}
.plp-seg-btn {
  height: 32px; padding: 0 12px;
  border: none; background: transparent;
  border-radius: 9px;
  font-family: var(--font-body); font-size: 13px; font-weight: 600;
  color: var(--neutral-600);
  cursor: pointer; white-space: nowrap;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.plp-seg-btn:hover { color: var(--neutral-950); }
.plp-seg-btn.is-active {
  background: var(--white);
  color: var(--navy-800);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .08), 0 1px 3px rgba(16, 24, 40, .06);
}
.plp-seg-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

/* ── Buscador de texto ────────────────────────────────────────────────── */
.plp-search {
  position: relative;
  display: flex; align-items: center;
  /* Base pequeña a propósito: con flex-wrap el navegador decide si envuelve
     comparando las bases, no los tamaños ya encogidos. Una base grande aquí
     empujaba el bloque de herramientas a una segunda fila en pantallas anchas. */
  flex: 1 1 160px; min-width: 160px; max-width: 340px;
  height: 38px;
  background: var(--white);
  border: 1px solid var(--neutral-200);
  border-radius: 10px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.plp-search:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(36, 85, 207, .12);
}
.plp-search-icon { color: var(--neutral-400); margin-left: 12px; flex-shrink: 0; }
.plp-search input {
  flex: 1; min-width: 0;
  height: 100%; padding: 0 8px;
  border: none; background: none; outline: none;
  font-family: var(--font-body); font-size: 13.5px; color: var(--neutral-950);
}
.plp-search input::placeholder { color: var(--neutral-500); }
.plp-search input::-webkit-search-cancel-button { display: none; }
.plp-q-clear {
  position: relative;
  display: grid; place-items: center;
  width: 26px; height: 26px; margin-right: 6px;
  border: none; border-radius: 50%;
  background: var(--neutral-100); color: var(--neutral-600);
  cursor: pointer; flex-shrink: 0;
  transition: background .15s ease, color .15s ease;
}
/* Área táctil de 44px sin agrandar el círculo visible */
.plp-q-clear::after {
  content: ""; position: absolute;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 44px; height: 44px;
}
.plp-q-clear:hover { background: var(--neutral-200); color: var(--neutral-950); }
.plp-q-clear:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

/* ── Filtros con menú ─────────────────────────────────────────────────── */
.plp-filters { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.plp-dd { position: relative; }
.plp-dd-btn {
  display: flex; align-items: center; gap: 6px;
  height: 38px; padding: 0 11px;
  background: var(--white);
  border: 1px solid var(--neutral-200);
  border-radius: 10px;
  font-family: var(--font-body); font-size: 13px; font-weight: 500;
  color: var(--neutral-600);
  cursor: pointer; white-space: nowrap;
  transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.plp-dd-btn svg { color: var(--neutral-400); transition: transform .18s ease; }
.plp-dd-btn:hover { border-color: var(--neutral-400); color: var(--neutral-950); }
.plp-dd-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.plp-dd-btn.is-active {
  background: var(--brand-soft);
  border-color: var(--brand);
  color: var(--brand-deep);
  font-weight: 600;
}
.plp-dd-btn.is-active svg { color: var(--brand); }
.plp-dd[data-open="true"] .plp-dd-btn svg { transform: rotate(180deg); }
.plp-dd-label { max-width: 118px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.plp-dd-menu {
  position: absolute; top: calc(100% + 8px); left: 0;
  min-width: 262px; z-index: 60;
  background: var(--white);
  border: 1px solid var(--neutral-200);
  border-radius: 14px;
  box-shadow: 0 16px 34px -18px rgba(16, 24, 40, .3), 0 4px 10px -4px rgba(16, 24, 40, .1);
  padding: 6px;
  opacity: 0; visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.plp-dd[data-open="true"] .plp-dd-menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
/* El último filtro se abre hacia la izquierda para no salirse del viewport */
.plp-dd:last-of-type .plp-dd-menu { left: auto; right: 0; }
.plp-dd-search { padding: 4px 4px 8px; }
.plp-dd-search input {
  width: 100%; height: 34px; padding: 0 12px;
  border: 1px solid var(--neutral-200); border-radius: 8px;
  font-family: var(--font-body); font-size: 13px; color: var(--neutral-950);
  outline: none;
  transition: border-color .15s ease;
}
.plp-dd-search input:focus { border-color: var(--brand); }
.plp-dd-list {
  list-style: none; margin: 0; padding: 0;
  max-height: 288px; overflow-y: auto;
}
.plp-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 12px; border-radius: 8px;
  font-family: var(--font-body); font-size: 13.5px; color: var(--neutral-600);
  cursor: pointer;
  transition: background .14s ease, color .14s ease;
}
.plp-opt:hover { background: var(--neutral-100); color: var(--neutral-950); }
.plp-opt:focus-visible {
  outline: none; background: var(--neutral-100); color: var(--neutral-950);
  box-shadow: inset 0 0 0 2px var(--brand);
}
.plp-opt.is-selected { color: var(--brand-deep); font-weight: 600; background: var(--brand-soft); }
.plp-opt-label { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.plp-opt-hint { font-size: 11.5px; color: var(--neutral-500); font-weight: 400; }
.plp-opt-count {
  font-size: 12px; color: var(--neutral-500);
  font-variant-numeric: tabular-nums; flex-shrink: 0;
}
.plp-opt.is-selected .plp-opt-count { color: var(--brand); }
.plp-opt-empty {
  padding: 14px 12px; font-size: 13px; color: var(--neutral-500); text-align: center;
}
/* Separador de operación en los rangos de precio (arriendo / venta) */
.plp-opt-group {
  padding: 10px 12px 5px;
  font-family: var(--font-body);
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--neutral-500);
}
.plp-opt-group:not(:first-child) {
  margin-top: 4px; border-top: 1px solid var(--neutral-150);
}

.plp-more-filters {
  display: flex; align-items: center; gap: 7px;
  height: 38px; padding: 0 13px;
  background: var(--white);
  border: 1px solid var(--neutral-200); border-radius: 10px;
  font-family: var(--font-body); font-size: 13px; font-weight: 600;
  color: var(--neutral-950);
  cursor: pointer; white-space: nowrap;
  transition: border-color .18s ease, background .18s ease;
}
.plp-more-filters:hover { border-color: var(--neutral-400); background: var(--neutral-100); }
.plp-more-filters:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.plp-more-filters svg { color: var(--neutral-500); }
/* display:grid gana sobre el [hidden] del navegador: hay que apagarlo a mano
   o el contador ocupa sitio aunque esté vacío. */
.plp-badge[hidden] { display: none; }
.plp-badge {
  display: grid; place-items: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px;
  background: var(--brand); color: #fff;
  font-size: 11px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ── Orden y vistas ───────────────────────────────────────────────────── */
.plp-tools { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-shrink: 0; }
.plp-sort-wrap { position: relative; display: flex; align-items: center; }
.plp-sort {
  appearance: none; -webkit-appearance: none;
  max-width: 140px;
  height: 38px; padding: 0 28px 0 11px;
  text-overflow: ellipsis;
  background: var(--white);
  border: 1px solid var(--neutral-200); border-radius: 10px;
  font-family: var(--font-body); font-size: 13px; font-weight: 500;
  color: var(--neutral-600);
  cursor: pointer;
  transition: border-color .18s ease, color .18s ease;
}
.plp-sort:hover { border-color: var(--neutral-400); color: var(--neutral-950); }
.plp-sort:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.plp-sort-chevron { position: absolute; right: 11px; pointer-events: none; color: var(--neutral-400); }
.plp-views {
  display: flex; gap: 2px; padding: 3px;
  background: var(--neutral-100); border-radius: 11px;
}
.plp-view-btn {
  display: grid; place-items: center;
  width: 32px; height: 32px;
  border: none; background: transparent; border-radius: 8px;
  color: var(--neutral-500); cursor: pointer;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.plp-view-btn:hover { color: var(--neutral-950); }
.plp-view-btn.is-active {
  background: var(--white); color: var(--brand-deep);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .08), 0 1px 3px rgba(16, 24, 40, .06);
}
.plp-view-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

/* ── Encabezado de resultados ─────────────────────────────────────────── */
.plp-head { padding-top: 20px; }
.plp-count {
  font-family: var(--font-main);
  font-size: 17px; font-weight: 500; letter-spacing: -.015em;
  color: var(--neutral-600); margin: 0;
}
.plp-count strong {
  color: var(--neutral-950); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.plp-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.plp-chips[hidden] { display: none; }
.plp-chip {
  display: inline-flex; align-items: center; gap: 7px;
  height: 30px; padding: 0 10px 0 12px;
  background: var(--white);
  border: 1px solid var(--neutral-200); border-radius: 999px;
  font-family: var(--font-body); font-size: 12.5px; font-weight: 600;
  color: var(--neutral-950);
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease;
}
.plp-chip svg { color: var(--neutral-500); transition: color .16s ease; }
.plp-chip:hover { border-color: var(--neutral-400); background: var(--neutral-100); }
.plp-chip:hover svg { color: var(--neutral-950); }
.plp-chip:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.plp-chip-clear {
  border: none; background: none; cursor: pointer;
  padding: 0 4px; margin-left: 2px;
  font-family: var(--font-body); font-size: 12.5px; font-weight: 600;
  color: var(--brand);
  text-decoration: underline; text-underline-offset: 3px;
}
.plp-chip-clear:hover { color: var(--brand-deep); }
.plp-chip-clear:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }

/* ── Resultados y carga progresiva ────────────────────────────────────── */
.plp-results { padding-top: 18px; padding-bottom: 64px; }
.plp-more-wrap { display: flex; justify-content: center; margin-top: 32px; }
.plp-more-btn {
  display: inline-flex; align-items: center; gap: 10px;
  height: 46px; padding: 0 22px;
  background: var(--white);
  border: 1px solid var(--neutral-200); border-radius: 12px;
  font-family: var(--font-body); font-size: 14px; font-weight: 600;
  color: var(--neutral-950);
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.plp-more-btn:hover { border-color: var(--brand); background: var(--brand-soft); }
.plp-more-btn:active { transform: scale(.99); }
.plp-more-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.plp-more-count {
  font-size: 12.5px; font-weight: 500; color: var(--neutral-500);
  font-variant-numeric: tabular-nums;
}
.plp-end {
  font-family: var(--font-body); font-size: 13px; color: var(--neutral-500);
  text-align: center; margin: 0;
}

/* ── Estado vacío ─────────────────────────────────────────────────────── */
.plp-empty {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: 72px 24px;
}
.plp-empty-icon { color: var(--neutral-400); margin-bottom: 18px; }
.plp-empty h3 {
  font-family: var(--font-main); font-size: 19px; font-weight: 600;
  color: var(--neutral-950); margin: 0 0 8px; letter-spacing: -.02em;
}
.plp-empty p {
  font-size: 14px; color: var(--neutral-500); margin: 0 0 22px; max-width: 44ch;
}
.plp-empty-btn {
  height: 42px; padding: 0 20px;
  background: var(--navy-700); color: #fff;
  border: none; border-radius: 10px;
  font-family: var(--font-body); font-size: 14px; font-weight: 600;
  cursor: pointer;
  transition: background .18s ease;
}
.plp-empty-btn:hover { background: var(--navy-800); }
.plp-empty-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ── Vista dividida: lista + mapa ─────────────────────────────────────── */
.plp-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  height: calc(100vh - var(--header-h, 68px) - var(--plp-bar-h, 61px));
  border-top: 1px solid var(--neutral-200);
}
.plp-split[hidden] { display: none; }
.plp-split-list {
  overflow-y: auto; overscroll-behavior: contain;
  padding: 18px 20px 32px;
  background: var(--white);
}
.plp-split-list .pcard-list .pcard-media { flex: 0 0 40%; max-width: 220px; }
.plp-split-list .pcard.is-highlight {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(36, 85, 207, .16);
}
.plp-split-map { position: relative; background: var(--neutral-100); }
.plp-split-map #map {
  position: absolute; inset: 0;
  height: 100%; width: 100%;
  border: none; border-radius: 0;
}
.plp-map-note {
  position: absolute; left: 16px; bottom: 16px; z-index: 500;
  max-width: 300px; margin: 0;
  padding: 9px 13px;
  background: rgba(255, 255, 255, .95);
  border: 1px solid var(--neutral-200); border-radius: 10px;
  box-shadow: 0 4px 14px -6px rgba(16, 24, 40, .28);
  font-family: var(--font-body); font-size: 12px; line-height: 1.4;
  color: var(--neutral-600);
}
.plp-map-note[hidden] { display: none; }

/* Marcador de precio */
.plp-pin {
  transform: translate(-50%, -50%);
  padding: 5px 10px;
  background: var(--white);
  border: 1px solid var(--neutral-200); border-radius: 999px;
  box-shadow: 0 3px 10px -3px rgba(16, 24, 40, .35);
  font-family: var(--font-main); font-size: 12px; font-weight: 600;
  color: var(--neutral-950);
  white-space: nowrap; cursor: pointer;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.plp-pin:hover { border-color: var(--brand); }
.plp-pin.is-active {
  background: var(--brand); border-color: var(--brand); color: #fff;
  box-shadow: 0 6px 16px -4px rgba(36, 85, 207, .5);
}

/* El rango de área elegido no tenía estado visible; ahora se marca igual
   que el resto de controles seleccionados del panel. */
.range-tag.active {
  background: var(--brand-soft);
  border-color: var(--brand);
  color: var(--brand-deep);
  font-weight: 600;
}

/* ── Filtros dentro del panel lateral ─────────────────────────────────── */
.plp-panel-group { margin-bottom: 18px; }
.plp-panel-label {
  display: block; margin-bottom: 8px;
  font-family: var(--font-body); font-size: 12.5px; font-weight: 700;
  color: var(--neutral-950); text-transform: uppercase; letter-spacing: .05em;
}

/* Mismo componente que la barra, pero el menú se abre en flujo: el panel
   tiene scroll propio y un menú flotante quedaría recortado. */
.plp-dd--panel .plp-dd-btn {
  width: 100%; height: 44px;
  justify-content: space-between;
  font-size: 14px;
}
.plp-dd--panel .plp-dd-label { max-width: none; }
.plp-dd--panel .plp-dd-menu {
  position: static;
  min-width: 0; width: 100%;
  margin-top: 6px;
  box-shadow: none;
  border-radius: 12px;
  transform: none;
  display: none;
  opacity: 1; visibility: visible;
  transition: none;
}
.plp-dd--panel[data-open="true"] .plp-dd-menu { display: block; }
.plp-dd--panel .plp-dd-list { max-height: 232px; }
.plp-dd--panel .plp-opt { font-size: 14px; padding: 10px 12px; }

/* ── Responsive ───────────────────────────────────────────────────────── */
/* Tablet: dos filas exactas —operación + búsqueda arriba, filtros + vista
   abajo—. Con flex-wrap el bloque de herramientas caía a una tercera fila. */
@media (max-width: 1100px) {
  .plp-bar-inner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "seg search" "filters tools";
    align-items: center;
  }
  .plp-seg { grid-area: seg; }
  .plp-search { grid-area: search; max-width: none; }
  .plp-filters { grid-area: filters; }
  .plp-tools { grid-area: tools; justify-self: end; }
}

@media (max-width: 860px) {
  .plp-bar-inner {
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas: "search search search" "seg more tools";
    row-gap: 9px; gap: 8px;
  }
  /* Los desplegables pasan al panel, pero el botón que lo abre se queda:
     display:contents deja que sus hijos participen de la rejilla.
     Se ocultan solo los de la barra: los del panel deben seguir visibles. */
  .plp-filters { display: contents; }
  .plp-bar .plp-dd { display: none; }
  .plp-more-filters { grid-area: more; }
  .plp-seg { justify-self: stretch; display: flex; }
  .plp-seg-btn { flex: 1; padding: 0 6px; font-size: 12.5px; }
  .plp-tools { gap: 6px; }
  .plp-sort-wrap { display: none; }         /* el orden también va al panel */
  .plp-view-btn[data-view="list"] { display: none; }
  .plp-head { padding-top: 16px; }
  .plp-count { font-size: 15.5px; }
  .plp-results { padding-top: 14px; padding-bottom: 44px; }
  .plp-split {
    grid-template-columns: 1fr;
    grid-template-rows: 46vh minmax(0, 1fr);
    height: auto;
  }
  .plp-split-map { order: -1; min-height: 46vh; }
  .plp-split-list { max-height: 62vh; }
  .plp-empty { padding: 52px 16px; }
}

@media (max-width: 520px) {
  .plp-more-filters { padding: 0 11px; }
  .plp-more-label { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .plp-dd-menu, .plp-seg-btn, .plp-view-btn, .plp-chip,
  .plp-more-btn, .plp-pin, .plp-dd-btn svg, .plp-search { transition: none; }
}