/* Property Card - Diseño Inspirado en la Imagen */

/* Property Card - Diseño Inspirado en la Imagen */

.property-card {
  display: block;
  background: white;
  border-radius: 12px;
  overflow: hidden;
  /* Sombra base más rica y borde sutil para separar del fondo blanco roto */
  box-shadow: 0 6px 18px rgba(16, 24, 40, 0.06), 0 1px 0 rgba(15, 23, 42, 0.02);
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
  text-decoration: none;
  color: inherit;
  border: 1px solid rgba(15, 23, 42, 0.04);
  height: 100%;
  display: flex;
  flex-direction: column;
}

@media (hover: hover) and (pointer: fine) {
  /* Hover: elevar ligeramente y aumentar la sombra de manera elegante */
  .property-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 48px rgba(16, 24, 40, 0.12), 0 4px 8px rgba(15, 23, 42, 0.04);
    border-color: rgba(0, 82, 156, 0.08);
  }
}

/* Accessible focus state for keyboard users */
.property-card:focus-visible {
  outline: none;
  box-shadow: 0 18px 48px rgba(16, 24, 40, 0.12), 0 0 0 4px rgba(0, 82, 156, 0.08);
  border-color: rgba(0, 82, 156, 0.12);
}

/* Grid View (Default) */
.property-card.grid-view {
  display: flex;
  flex-direction: column;
}

.property-card.grid-view .property-image-container {
  aspect-ratio: 16/10;
  position: relative;
  overflow: hidden;
  /* Añadir separación visual entre la imagen y el borde mediante un fondo ligero */
  background: linear-gradient(180deg, #F7F8FA 0%, #F3F4F6 100%);
}

.property-card.grid-view .property-info {
  padding: 1.25rem;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* List View */
.property-card.list-view {
  display: grid;
  grid-template-columns: 300px 1fr;
  min-height: 200px;
}

.property-card.list-view .property-image-container {
  aspect-ratio: 16/10;
  position: relative;
  overflow: hidden;
  background: #F3F4F6;
  transition: transform 0.36s cubic-bezier(.2,.9,.2,1), box-shadow 0.28s ease;
}

.property-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
  .property-card:hover .property-image {
    transform: scale(1.06) translateZ(0);
    /* Suave elevación visual adicional para la imagen */
    filter: saturate(1.02) contrast(1.01);
  }
}

/* Image Navigation */
.image-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.6);
  color: white;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.25rem;
  font-weight: bold;
  transition: all 0.3s ease;
  opacity: 0;
  z-index: 2;
}

@media (hover: hover) and (pointer: fine) {
  .property-card:hover .image-nav {
    opacity: 1;
  }
}

@media (hover: hover) and (pointer: fine) {
  .image-nav:hover {
    transform: translateY(-50%) scale(1.08);
    box-shadow: 0 10px 28px rgba(16,24,40,0.12);
  }
}

.image-nav.prev {
  left: 8px;
}

.image-nav.next {
  right: 8px;
}

.image-counter {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 500;
  z-index: 2;
}

/* Property Badge */
.property-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
}

.operation-type {
  background: #00529C; /* Azul Abadie */
  color: white;
  padding: 0.375rem 0.75rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* El estado de la operación, al lado del tipo de operación.
   Mismas medidas que `.operation-type` —el de al lado— para que los dos carteles
   se lean como un par y no como dos cosas pegadas de distinto lado.

   ⚠️ Esto vivió un rato en `PropertyCard-nueva.css`, que NO LO IMPORTA NADIE:
   es un archivo muerto de un rediseño anterior que quedó en la carpeta con un
   nombre que parece el bueno. El resultado fue un cartel sin fondo ni color,
   escrito en gris oscuro encima de la foto. La hoja que se usa es esta. */
.estado-comercial {
  display: inline-block;
  margin-left: 6px;
  padding: 0.375rem 0.75rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #fff;
}

/* Ámbar: todavía puede caerse, así que sigue valiendo preguntar. */
.estado-comercial.es-reservada {
  background: rgba(217, 119, 6, 0.95);
}

/* Gris: es información, no una oferta. Así no le compite a las que sí se
   pueden comprar, que es de lo que se trata el listado. */
.estado-comercial.es-cerrada {
  background: rgba(30, 41, 59, 0.9);
}

/* Verde: es una buena noticia para quien está mirando, y es justo el dato que
   se venía escribiendo a mano en el título para que se viera. */
.estado-comercial.es-retasado {
  background: rgba(5, 150, 105, 0.95);
}

/* El precio anterior, tachado al lado del nuevo.
   Va en su propia línea de tamaño y color: pegado y del mismo cuerpo que el
   precio, los dos números se leían como uno solo
   ("USD 285.000USD 1.500.000"). */
.property-price-anterior {
  margin-left: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: #94a3b8;
  text-decoration: line-through;
  white-space: nowrap;
}

/* Property Actions */
.property-actions {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  gap: 0.5rem;
  z-index: 2;
}

.action-btn {
  width: 36px;
  height: 36px;
  /* Fondo blanco translúcido para mantener legibilidad sobre imágenes */
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(15,23,42,0.04);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
  font-size: 1rem;
  color: var(--color-text-primary);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}

@media (hover: hover) and (pointer: fine) {
  .action-btn:hover {
    transform: scale(1.06);
    box-shadow: 0 10px 24px rgba(16,24,40,0.12);
  }
}

/* .action-btn.liked selector removed because 'Me gusta' feature was removed. */

/* Property Info */
.property-name {
  font-size: 1.125rem;
  font-weight: 800;
  color: #0F172A; /* slate-900 */
  margin: 0 0 0.5rem 0;
  line-height: 1.2;
}

.property-price {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-title);
  margin-bottom: 0;
}

.property-expensas {
  font-size: 0.8125rem; /* 13px */
  color: #6B6B6B; /* gris suave */
  margin-top: 0; /* pegar al precio */
  margin-bottom: 0.125rem;
  font-weight: 500;
  line-height: 1;
}

.property-card.list-view .property-price {
  font-size: 1.75rem;
  margin-bottom: 0;
}

/* Apta crédito: el mismo tamaño y gris que las expensas, con el ícono en el
   color de la marca. Sutil: la ficha es la que lo destaca. */
.property-apta-credito {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #6B6B6B;
  line-height: 1;
}

.property-apta-credito svg {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  color: var(--color-title);
}

.property-address {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--color-text-primary);
  line-height: 1.4;
}

.property-location-btn {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--color-text-primary);
  line-height: 1.4;
  background: rgba(0, 82, 156, 0.04);
  border: 1px solid rgba(0, 82, 156, 0.12);
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: 500;
  width: auto;
  max-width: 100%;
}

@media (hover: hover) and (pointer: fine) {
  .property-location-btn:hover {
    background: rgba(0, 82, 156, 0.08);
    border-color: rgba(0, 82, 156, 0.24);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 82, 156, 0.12);
  }
}

.property-location-btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(0, 82, 156, 0.08);
}

.property-location-btn svg {
  color: var(--color-title);
  flex-shrink: 0;
  font-size: 1rem;
  transition: transform 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .property-location-btn:hover svg {
    transform: scale(1.1);
  }
}

.property-location-btn span {
  font-weight: 500;
}

.property-address.clickable {
  cursor: pointer;
  transition: color 0.2s ease, transform 0.2s ease;
  border-radius: 6px;
  padding: 0.25rem 0;
  margin: -0.25rem 0;
}

@media (hover: hover) and (pointer: fine) {
  .property-address.clickable:hover {
    color: var(--color-title);
  }
}

@media (hover: hover) and (pointer: fine) {
  .property-address.clickable:hover svg {
    transform: scale(1.1);
    color: var(--color-title);
  }
}

.property-address.clickable:active {
  transform: scale(0.98);
}

.property-address svg {
  color: var(--color-title);
  margin-top: 0.125rem;
  flex-shrink: 0;
  font-size: 1rem;
  transition: transform 0.2s ease, color 0.2s ease;
}

.property-address span {
  font-weight: 500;
}

/* Property Specs */
.property-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.spec-item {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  color: var(--color-text-primary);
  font-weight: 500;
}

.spec-item svg {
  color: var(--color-title);
  font-size: 0.875rem;
}

/* Responsive */
@media (max-width: 768px) {
  .property-card {
    height: 100%;
  }

  .property-card.grid-view .property-image-container {
    aspect-ratio: 16/10;
    min-height: 220px;
  }

  .property-card.list-view {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .property-card.list-view .property-image-container {
    aspect-ratio: 16/9;
  }

  .property-card.list-view .property-price {
    font-size: 1.5rem;
  }

  .image-nav {
    width: 28px;
    height: 28px;
    font-size: 1rem;
  }

  .property-actions {
    top: 8px;
    right: 8px;
    gap: 0.25rem;
  }

  .action-btn {
    width: 32px;
    height: 32px;
    font-size: 0.875rem;
  }
}

@media (max-width: 480px) {
  .property-card.grid-view .property-info {
    padding: 1rem;
  }

  .property-card.list-view .property-info {
    padding: 1rem;
  }

  .property-name {
    font-size: 0.875rem;
  }

  .property-address {
    font-size: 0.8rem;
  }

  .property-price {
    font-size: 1.25rem;
  }

  .property-card.list-view .property-price {
    font-size: 1.5rem;
  }
}

.spec-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #F3F4F6;
  color: #374151;
  padding: 0.35rem 0.6rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  border: 1px solid rgba(15,23,42,0.03);
}

.spec-chip svg {
  color: #00529C;
  font-size: 0.95rem;
}

/* CTA */
.property-cta-row {
  display: flex;
  justify-content: flex-start;
  margin-top: auto;
}

.cta-btn {
  background: #FDBF50; /* Dorado Abadie */
  color: #0F172A;
  border: none;
  padding: 0.6rem 1rem;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(253,191,80,0.12);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

@media (hover: hover) and (pointer: fine) {
  .cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 38px rgba(253,191,80,0.18);
  }
}


/* ─────────────────────────────────────────────────────────────────────────────
   PANTALLAS TÁCTILES
   ==================
   Todo lo que arriba se muestra con `:hover` está envuelto en
   `@media (hover: hover)`, así que en un teléfono o una tablet no aplica. Lo que
   antes se revelaba al pasar el mouse y ahora no se revelaría nunca, se muestra
   siempre: sin hover, un botón invisible es un botón que no existe.

   Esto es lo que arregla el doble tap. Cuando una regla `:hover` cambia lo que
   se ve, el navegador táctil gasta el primer toque en encenderla y recién el
   segundo abre la tarjeta.
   ───────────────────────────────────────────────────────────────────────────── */
@media (hover: none) {
  .image-nav {
    opacity: 1;
  }
}