/* =============================================================================
   overrides.css — Overrides controlados del proyecto
   ============================================================================= */

/* =============================================================================
   AJUSTES ACTIVOS — Listado tarjetas
   ============================================================================= */

.property-extras {
  overflow: visible;
}

.property-extras .extras-wrapper {
  margin-top: -10px;
  overflow: visible;
  max-height: none;
}

.property-meta-row {
  margin-top: 4px;
}

/* =============================================================================
   Hover “+N más” de extras — tooltip instantáneo (sin delay del navegador)
   ============================================================================= */

@media (hover: hover) and (pointer: fine) {
  .property-extras .extra--more[title] {
    position: relative;
    cursor: default;
  }

  .property-extras .extra--more[title]::after {
    content: attr(title);
    position: absolute;
    left: 0;
    bottom: calc(100% + 8px);
    z-index: 9999;
    max-width: min(560px, 70vw);
    width: max-content;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(17, 24, 39, 0.92);
    color: #fff;
    font-size: 12px;
    line-height: 1.35;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25);
    white-space: normal;
    opacity: 0;
    transform: translateY(4px);
    pointer-events: none;
    transition:
      opacity 80ms ease,
      transform 80ms ease;
  }

  .property-extras .extra--more[title]:hover::after {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =============================================================================
   APLICADO — .property-content (pedido)
   ============================================================================= */

.property-content {
  flex: 1;
  padding: 10px;
  display: flex;
  flex-direction: column;
  height: 101%;
}

/* En index-casa.php hay reglas más específicas que fuerzan height:100%.
   Esto asegura que el 101% se mantenga en todos los modos. */
.mode-grid .property-content,
.mode-map2 .property-content,
.mode-map3 .property-content,
.mode-map-1 .property.carrusel-card > .property-content,
.property.carrusel-card .property-content {
  height: 101% !important;
}