/* =====================================================
   ARCHIVE PROPIEDADES
   Solo: filtro sticky, grid, resultados, paginación
   Depende de: variables.css + propiedad-card.css
   ===================================================== */

/* =====================================================
   BARRA FILTRO STICKY
   ===================================================== */
.filtro-sticky-wrapper {
  position: sticky;
  top: 35px;
  z-index: 100;
  background: var(--fp-bg);
  border-bottom: 1px solid var(--fp-border);
  box-shadow: var(--fp-shadow);
  border-radius: var(--fp-radius);
  transition: box-shadow var(--fp-transition);
}

.filtro-sticky-wrapper.is-stuck {
  box-shadow: var(--fp-shadow-sticky);
}

/* =====================================================
   CONTENEDOR INTERNO DE LA BARRA
   ===================================================== */
.filtro-propiedades-bar {
  display: flex;
  align-items: center;
  gap: 0;
  max-width: 1280px;
  margin: 0 auto;
  padding: 10px 15px;
  min-height: 56px;
  font-family: var(--fp-font);
  border-radius: var(--fp-radius); /* ← hereda el radius del wrapper */
}

/* =====================================================
   ÍTEMS DEL FILTRO
   ===================================================== */
.fp-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 16px;
  height: 100%;
  border-right: 1px solid var(--fp-border);
  position: relative;
  min-width: 130px;
  flex-shrink: 0;
}

.fp-item:first-child {
  padding-left: 0;
}

.fp-item.fp-item--grow {
  flex: 1 1 auto;
  min-width: 160px;
}

/* Label flotante */
.fp-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fp-muted);
  line-height: 1;
  margin-bottom: 3px;
  pointer-events: none;
  white-space: nowrap;
}

/* Inputs y selects */
.fp-item select,
.fp-item input[type="text"],
.fp-item input[type="number"] {
  border: none;
  outline: none;
  background: transparent;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--fp-text);
  padding: 0;
  width: 100%;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  line-height: 1.3;
}

.fp-item select:focus,
.fp-item input:focus {
  color: var(--fp-accent);
}

.fp-item input::placeholder {
  color: #b0b7c3;
  font-weight: 400;
}

/* Quitar flechas nativas en number */
.fp-item input[type="number"]::-webkit-inner-spin-button,
.fp-item input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Flecha custom para selects */
.fp-item--select::after {
  content: '';
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--fp-muted);
  pointer-events: none;
}

.fp-item--select select {
  padding-right: 18px;
}

/* --------------------------------------------------
   Ítem precio — rango en una línea
-------------------------------------------------- */
.fp-item--precio {
  flex-direction: column;
  justify-content: center;
  min-width: 50px;
  max-width: 300px;
}

.fp-precio-inputs {
  display: flex;
  align-items: center;
  gap: 6px;
}

.fp-precio-inputs input {
  width: 55px;
  font-size: 13px;
}

.fp-precio-sep {
  color: var(--fp-muted);
  font-size: 12px;
  flex-shrink: 0;
}

.fp-precio-prefix {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.fp-peso {
  font-size: 13px;
  font-weight: 500;
  color: var(--fp-muted);
  line-height: 1;
  flex-shrink: 0;
}

/* --------------------------------------------------
   Ítem búsqueda de texto
-------------------------------------------------- */
.fp-item--search {
  flex: 2 1 220px;
}

.fp-item--search input {
  font-size: 13.5px;
}

/* =====================================================
   BOTONES DE ACCIÓN
   ===================================================== */
.fp-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 16px;
  padding-right: 16px;
  flex-shrink: 0;
}

.fp-btn-buscar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--fp-accent);
  color: #fff;
  border: none;
  border-radius: var(--fp-radius-sm);
  padding: 0 20px;
  height: 38px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--fp-transition), transform var(--fp-transition);
  white-space: nowrap;
}

.fp-btn-buscar:hover {
  background: var(--fp-accent-hover);
  transform: translateY(-1px);
}

.fp-btn-buscar svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.fp-btn-limpiar {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  color: var(--fp-muted);
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius-sm);
  padding: 0 16px;
  height: 38px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--fp-transition);
  white-space: nowrap;
}

.fp-btn-limpiar:hover {
  border-color: var(--fp-muted);
  color: var(--fp-text);
  background: #f3f4f6;
}



/* Lista de sugerencias del autocomplete */
.fp-suggestions-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 0 0 8px 8px;
    list-style: none;
    margin: 0;
    padding: 0;
    z-index: 1500;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    max-height: 260px;
    overflow-y: auto;
}

.fp-suggestion-item {
    padding: 10px 14px;
    cursor: pointer;
    font-size: 0.9rem;
    border-bottom: 1px solid #f5f5f5;
    display: flex;
    align-items: center;
    gap: 8px;
}

.fp-suggestion-item:last-child {
    border-bottom: none;
}

.fp-suggestion-item:hover,
.fp-suggestion-item.is-focused {
    background: #f7f7f7;
}

/* Etiqueta de tipo (colonia vs ubicación) */
.fp-suggestion--colonia::before {
    font-size: 0.8rem;
}

.fp-suggestion--ubicacion::before {
    font-size: 0.8rem;
}




/* =====================================================
   BARRA DE RESULTADOS
   ===================================================== */
.propiedades-results-bar {
  max-width: 1280px;
  margin: 24px auto 12px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#propiedades-count {
  font-size: 13px;
  color: var(--fp-muted);
  font-weight: 500;
}

/* =====================================================
   GRID DEL ARCHIVE
   ===================================================== */
.propiedades-archive-wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

.propiedades-filtros-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem;
}

.propiedades-archive-title {
  font-size: 1.8rem;
  font-weight: 700;
}

.propiedades-count {
  color: var(--fp-muted);
  font-size: 0.95rem;
}

#propiedades-grid {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px 48px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
  transition: opacity 0.25s ease;
}

/* Grid alternativo (clase más antigua, por si tus templates la usan) */
.propiedades-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.75rem;
}

/* =====================================================
   PAGINACIÓN
   ===================================================== */
.propiedades-pagination {
  max-width: 1280px;
  margin: 0 auto 48px;
  padding: 0 24px;
  text-align: center;
}

.propiedades-pagination .page-numbers {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.propiedades-pagination .page-numbers li a,
.propiedades-pagination .page-numbers li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border-radius: var(--fp-radius-sm);
  border: 1px solid var(--fp-border);
  font-size: 13px;
  font-weight: 500;
  color: var(--fp-text);
  text-decoration: none;
  transition: all var(--fp-transition);
}

.propiedades-pagination .page-numbers li a:hover {
  border-color: var(--fp-accent);
  color: var(--fp-accent);
}

.propiedades-pagination .page-numbers li span.current {
  background: var(--fp-accent);
  border-color: var(--fp-accent);
  color: #fff;
}

/* =====================================================
   RESPONSIVE — Tablet (≤ 1024px)
   ===================================================== */
@media (max-width: 1024px) {
  .filtro-propiedades-bar {
    flex-wrap: wrap;
    height: auto;
    padding: 12px 16px;
    gap: 8px;
  }

  .fp-item {
    border-right: none;
    border: 1px solid var(--fp-border);
    border-radius: var(--fp-radius-sm);
    padding: 8px 12px;
    height: auto;
    flex: 1 1 calc(50% - 8px);
    min-width: calc(50% - 8px);
  }

  .fp-item:first-child {
    padding-left: 12px;
  }

  .fp-item--select::after {
    right: 12px;
  }

  .fp-item--precio,
  .fp-item--search {
    flex: 1 1 100%;
    min-width: 100%;
  }

  .fp-actions {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
    justify-content: flex-end;
  }

  .fp-btn-buscar {
    flex: 1;
    justify-content: center;
    height: 42px;
    font-size: 14px;
  }
}

/* =====================================================
   RESPONSIVE — Mobile (≤ 600px)
   ===================================================== */
@media (max-width: 600px) {
  .filtro-sticky-wrapper {
    position: static;
    box-shadow: none;
  }

  .filtro-propiedades-bar {
    padding: 10px 12px;
    gap: 8px;
  }

  .fp-item {
    flex: 1 1 100%;
    min-width: 100%;
  }

  .fp-item--precio .fp-precio-inputs input {
    width: 70px;
  }

  .fp-actions {
    padding-right: 0;
  }

  .fp-btn-buscar {
    flex: 1;
    height: 44px;
    min-height: 44px;
    padding: 0 20px;
    justify-content: center;
    font-size: 14px;
  }

  .fp-btn-limpiar {
    display: none;
  }

  #propiedades-grid {
    grid-template-columns: 1fr;
    padding: 0 12px 32px;
  }

  .propiedades-results-bar {
    padding: 0 12px;
  }

  .propiedades-pagination {
    padding: 0 12px;
  }
}