/* Properties Page - Diseño Moderno Inspirado en Apple */

.properties-page {
  min-height: 100vh;
  /* Usar el Fondo General (Blanco Roto) en lugar de la variable no definida --color-bg-general */
  background-color: var(--color-background);
  display: flex;
  flex-direction: column;
}

.properties-main {
  flex: 1 1;
  padding: 2rem 0;
}

.properties-container {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 2rem;
  align-items: start;
}

/* Sidebar de Filtros */
.properties-sidebar {
  position: sticky;
  top: 100px;
  height: fit-content;
  max-height: calc(100vh - 120px);
}

/* Contenido Principal */
.properties-content {
  width: 100%;
}

/* Regla explícita y más específica para evitar que selectors globales como
   `section:nth-child(even)` (definidos en globals.css) apliquen el fondo crema
   a esta sección de resultados. Usamos background-color para mantener la
   semántica y permitir futuras transiciones. */
section.properties-content {
  background-color: var(--color-background);
}

.properties-header {
  margin-bottom: 2rem;
  background: white;
  padding: 1.5rem;
  border-radius: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.properties-results-info {
  margin-bottom: 1.5rem;
}

.properties-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-title);
  margin: 0;
}

.properties-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

/* Sort Control */
.sort-control {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.sort-control label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-primary);
}

.sort-control .select-wrapper {
  position: relative;
}

.sort-select {
  padding: 0.5rem 2rem 0.5rem 0.875rem;
  border: 1px solid #E5E7EB;
  border-radius: 0;
  background: white;
  font-size: 0.875rem;
  color: var(--color-text-primary);
  cursor: pointer;
  transition: all 0.3s ease;
  appearance: none;
  font-family: inherit;
  min-width: 180px;
}

.sort-select:hover {
  border-color: var(--color-title);
}

.sort-select:focus {
  outline: none;
  border-color: var(--color-title);
  box-shadow: 0 0 0 3px rgba(100, 75, 109, 0.15);
}

.select-wrapper .select-icon {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--color-text-primary);
  font-size: 1rem;
}

/* View Controls */
.view-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.view-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  border: 1px solid #E5E7EB;
  border-radius: 0;
  background: white;
  color: var(--color-text-primary);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: inherit;
}

.view-button:hover {
  background: var(--color-background);
  border-color: var(--color-title);
  color: var(--color-title);
}

.view-button.active {
  background: var(--color-title);
  color: white;
  border-color: var(--color-title);
}

  /* Map button */
  .view-controls .map-button {
    
    background: var(--color-primary);
    color: white;
    border: none;
    box-shadow: 0 6px 18px rgba(100, 75, 109, 0.18);
  }

  .view-controls .map-button:hover:not(.disabled) {
        background: var(--color-secondary);
    transform: translateY(-1px);
  }

  .view-controls .map-button.disabled {
    opacity: 0.6;
    cursor: not-allowed;
    box-shadow: none;
    background: #c2a1cc;
    color: rgba(255,255,255,0.6);
  }

  @media (min-width: 1200px) {
    .view-controls .map-button {
      padding: 0.875rem 1.75rem;
      font-size: 1rem;
      border-radius: 0;
      box-shadow: 0 8px 22px rgba(100, 75, 109, 0.22);
    }
  }

.view-button.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: #F9FAFB;
  color: #9CA3AF;
  border-color: #E5E7EB;
}

.view-button.disabled:hover {
  background: #F9FAFB;
  border-color: #E5E7EB;
  color: #9CA3AF;
  transform: none;
}

/* Grid de Propiedades */
.properties-grid {
  display: grid;
  gap: 1.5rem;
  align-items: stretch;
}

/* Animación suave solo cuando se cargan las propiedades reales */
.properties-grid:not(.loading-grid) {
  animation: fadeIn 0.4s ease;
}

/* Grid de skeletons sin animación para evitar flash */
.properties-grid.loading-grid {
  animation: fadeInFast 0.2s ease;
}

@keyframes fadeInFast {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.properties-grid.grid {
  grid-template-columns: repeat(3, minmax(0, 450px));
  grid-auto-rows: minmax(500px, auto);
  justify-content: start;
}

.properties-grid.list {
  grid-template-columns: 1fr;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Loading State */
.properties-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  text-align: center;
}

.loading-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid var(--color-bg-section);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 1rem;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Spinner pequeño para lazy loading de componentes */
.filters-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.loading-spinner-small {
  width: 24px;
  height: 24px;
  border: 3px solid var(--color-bg-section);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.properties-loading p {
  font-size: 1rem;
  color: var(--color-text-primary);
  font-weight: 500;
}

/* Empty State */
.properties-empty {
  text-align: center;
  padding: 4rem 2rem;
  background: white;
  border-radius: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* Asegurar que no quedf3n usages de la variable antigua */
.properties-content {
  background: var(--color-background);
}

.properties-empty p {
  font-size: 1.125rem;
  color: var(--color-text-primary);
  margin-bottom: 1.5rem;
}

.clear-filters-button {
  padding: 0.875rem 2rem;
  background: var(--color-accent);
  color: var(--color-text-primary);
  border: none;
  border-radius: 0;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: inherit;
}

.clear-filters-button:hover {
  background: var(--color-secondary);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(100, 75, 109, 0.3);
}

/* Infinite Scroll Loading Trigger */
.load-more-trigger {
  grid-column: 1 / -1;
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.load-more-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  animation: fadeIn 0.3s ease;
}

.load-more-loading p {
  font-size: 0.875rem;
  color: var(--color-text-primary);
  font-weight: 500;
}

/* Load More Button (legacy - por si se necesita) */
.load-more-container {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  padding: 2rem 0;
}

.load-more-button {
  padding: 1rem 2rem;
  background: var(--color-accent);
  color: var(--color-text-primary);
  border: none;
  border-radius: 0;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: inherit;
  box-shadow: 0 2px 8px rgba(100, 75, 109, 0.2);
}

.load-more-button:hover:not(:disabled) {
  background: var(--color-secondary);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(100, 75, 109, 0.3);
}

.load-more-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* Responsive */
@media (max-width: 1200px) {
  .properties-container {
    grid-template-columns: 260px 1fr;
    gap: 1.5rem;
  }

  .properties-grid.grid {
    grid-template-columns: repeat(2, 1fr);
  }

/* Force consistent sizing for view/map/filter buttons on small screens */
@media (max-width: 640px) {
  .view-controls .view-button,
  .view-controls .map-button,
  .mobile-filters-button {
    height: 44px; /* consistent tap target */
    min-width: 44px;
    padding: 0 0.85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
  }

  .view-controls .view-button svg,
  .mobile-filters-button svg {
    font-size: 1.15rem;
  }

  /* Ensure label inside map button doesn't increase height and has spacing */
  .map-button .view-button-label {
    display: inline-block;
    margin-left: 0.5rem;
    font-size: 0.95rem;
    line-height: 1;
  }

  /* If the grid button has active state with different padding, normalize it */
  .view-controls .view-button.active {
    padding: 0 0.85rem;
  }
}
}

/* Por defecto ocultar el botón/drawer de filtros (solo mostrar en mobile mediante media queries) */
.mobile-filters-row,
.mobile-filters-button {
  display: none;
}

@media (max-width: 767px) {
  .properties-container {
    grid-template-columns: 1fr;
  }

  .properties-sidebar {
    position: relative;
    top: 0;
    max-height: none;
    margin-bottom: 1.5rem;
  }

  .properties-controls {
    flex-direction: column;
    align-items: stretch;
  }

  .sort-control {
    width: 100%;
    justify-content: space-between;
  }

  .view-controls {
    width: 100%;
    justify-content: flex-end;
  }

  /* Mostrar fila de filtros mobile dentro del header */
  .mobile-filters-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
  }

  /* Make sort select responsive so the arrow stays inside on small screens */
  .sort-control {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

  .sort-control label {
    flex: 0 0 auto;
    margin-right: 0.5rem;
  }

  .sort-control .select-wrapper {
    flex: 1 1 auto;
    min-width: 0; /* allow the select to shrink */
    max-width: 420px;
    position: relative; /* ensure icon positioned relative to this wrapper */
  }

  .sort-select {
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
  }

  /* Additional mobile tweaks for the icon to stay inside the select */
  .select-wrapper .select-icon {
    right: 0.5rem;
  }

  .sort-select {
    padding-right: 2.25rem; /* leave room for the icon inside */
  }

  /* Mobile filters button now shown alongside view-controls */
  .mobile-filters-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    background: var(--color-primary);
    color: white;
    border: none;
    border-radius: 0;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    box-shadow: 0 4px 12px rgba(100, 75, 109, 0.3);
    margin-right: 0.5rem;
    transition: all 0.2s ease;
  }

  .mobile-filters-button:hover {
    background: var(--color-secondary);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(100, 75, 109, 0.4);
  }

  .mobile-filters-button .mobile-filter-icon {
    margin-right: 0.5rem;
    font-size: 1.05rem;
  }

  /* On mobile, move view-controls items to the right but keep spacing */
  .view-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: flex-end;
  }
}

/* 767 y no 768: en 768 exactos aplicaba a la vez que el `max-width: 767px` de
   más arriba y que el tramo de tablet, y el `max-width: 500px` de acá dejaba las
   tarjetas centradas y angostas justo en el ancho de un iPad mini. */
@media (max-width: 767px) {
  .properties-grid.grid {
    grid-template-columns: 1fr;
    grid-auto-rows: minmax(400px, auto);
    max-width: 500px;
    margin: 0 auto;
  }
}

@media (max-width: 640px) {
  .properties-main {
    padding: 1rem 0;
  }

  .properties-container {
    padding: 0 1rem;
  }

  .properties-header {
    padding: 1rem;
  }

  .properties-title {
    font-size: 1rem;
  }

  .properties-grid.grid {
    grid-template-columns: 1fr;
    grid-auto-rows: minmax(400px, auto);
    gap: 1rem;
    max-width: 500px;
    margin: 0 auto;
  }

  /* Hide labels for view buttons on mobile, except show label for the map button */
  .view-button span {
    display: none;
  }

  .map-button .view-button-label {
    display: inline; /* show "Ver en mapa" on mobile */
    margin-left: 0.5rem;
    font-weight: 600;
    font-size: 0.95rem;
  }

  /* Ocultar la barra lateral de filtros en mobile (solo usar el botón/drawer) */
  .properties-sidebar {
    display: none;
  }

  /* Asegurar que el control de orden se muestre en mobile y ocupe el espacio adecuado */
  .sort-control {
    width: 100%;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
  }

  .sort-select {
    min-width: 0;
    width: 60%;
  }

  /* Mobile filters modal/drawer styles */
  .mobile-filters-overlay {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
  }

  .mobile-filters-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.35);
    border: none;
  }

  .mobile-filters-drawer {
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    width: 92%;
    max-width: 420px;
    height: 100vh;
    background: white;
    box-shadow: -8px 0 24px rgba(0,0,0,0.12);
    padding: 0;
    display: flex;
    flex-direction: column;
    z-index: 1220;
    overflow: hidden;
  }

  .mobile-filters-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: linear-gradient(135deg, white 0%, #4a3554 100%);
    border-bottom: 2px solid var(--color-primary);
    padding: 1rem;
    margin: 0;
    flex-shrink: 0;
  }

  .mobile-filters-header h3 {
    color: white;
    font-weight: 700;
    margin: 0;
  }

  .mobile-filters-close {
    background: transparent;
    border: 1px solid rgba(100, 75, 109, 0.3);
    color: var(--color-primary);
    font-size: 1.25rem;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 0;
    transition: all 0.2s ease;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .mobile-filters-close:hover {
    background: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
  }

  .mobile-filters-body {
    overflow-y: auto;
    padding: 1rem;
    padding-bottom: 2rem;
    flex: 1 1;
  }

  /* Evitar scroll en la página cuando el drawer está abierto */
  body.filters-open {
    overflow: hidden;
  }

  .properties-page.filters-open {
    overflow: hidden;
    max-height: 100vh;
  }
}


/* ─────────────────────────────────────────────────────────────────────────────
   TABLET (768–1023px)
   ===================
   Este tramo no existía. El layout de escritorio arrancaba en 969px y los
   estilos de teléfono cortaban en 768px, así que un iPad vertical (768–834px)
   caía en el medio: recibía el layout apilado —con el panel de filtros entero
   desplegado ARRIBA de los resultados, porque la sidebar va primero en el DOM—
   pero no los estilos que lo hacían usable en un teléfono.

   Ahora las dos fronteras son la misma (768px) y acá se ajusta la densidad:
   sidebar angosta y una sola columna de tarjetas.
   ───────────────────────────────────────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1023px) {
  .properties-container {
    /* 200px. Con 240 y dos columnas, a cada tarjeta le quedaban unos 210px de
       ancho con filas de 500px de alto: angostas y altísimas. */
    grid-template-columns: 200px 1fr;
    gap: 1.25rem;
  }

  .properties-sidebar {
    /* Fija, como en escritorio. Esto es lo que arregla el síntoma: deja de
       apilarse arriba de los resultados.

       `top: 100px`, el mismo valor que en escritorio y no `1rem`. Ese era el
       "muy arriba" y el "muy abajo" del reporte, que son el mismo error: con la
       navbar fija de unos 64px, 1rem metía la sidebar por debajo de la navbar y
       la dejaba arrancando muy por encima del encabezado blanco de los
       resultados. Igualando el `top`, la sidebar y la caja de "Ordenar por"
       quedan a la misma altura. */
    position: sticky;
    top: 100px;
    align-self: start;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    margin-bottom: 0;
  }

  .properties-grid.grid {
    /* Una columna. Es lo decidido: en esta franja una tarjeta ancha se lee mucho
       mejor que dos angostas. */
    grid-template-columns: 1fr;
  }

  /* El botón de filtros es del drawer de teléfono; acá la sidebar ya está a la
     vista y el botón abriría un panel duplicado. */
  .mobile-filters-row,
  .mobile-filters-button {
    display: none;
  }
}