/* ==========================================================================
   Detalle de inmueble

   Diseñado primero para móvil: galería de borde a borde, ficha que sube y
   monta sobre la media con las esquinas redondeadas, y barra de acciones fija
   abajo. Desde 992px se reacomoda a dos columnas con la ficha pegajosa.
   ========================================================================== */

/* --- Cabecera flotante sobre la galería (solo móvil) --- */
.detalle-header { display: none; }

.detalle-header-btn,
.detalle-header-pastilla {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  border: 0;
  text-decoration: none;
  color: #212529;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 .15rem .6rem rgba(0,0,0,.18);
}
.detalle-header-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  justify-content: center;
}
.detalle-header-pastilla {
  border-radius: 50rem;
  padding: .45rem .9rem;
  font-size: .85rem;
  font-weight: 500;
  background: rgba(244,245,247,.94);
}
.detalle-header svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- Galería mixta de fotos y videos --- */
.detalle-galeria .carousel { position: relative; }
.detalle-galeria .carousel-inner { border-radius: var(--radius); overflow: hidden; }

.detalle-galeria .carousel-item img,
.detalle-galeria .galeria-video video {
  width: 100%;
  height: 420px;
  object-fit: cover;
  display: block;
  background: #000;
}

.galeria-video { position: relative; }

/* El botón de play solo existe en los elementos de tipo video; las fotos van
   limpias, sin controles. */
.galeria-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 68px;
  height: 68px;
  border: 0;
  border-radius: 50%;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .15s ease, background-color .15s ease;
}
.galeria-play svg { width: 32px; height: 32px; fill: #fff; margin-left: 3px; }
.galeria-play:hover { background: rgba(0,0,0,.6); transform: translate(-50%, -50%) scale(1.06); }
.galeria-play.oculto { display: none; }

/* Contador de posición, ej. "1 / 24" */
.galeria-contador {
  position: absolute;
  right: .75rem;
  bottom: .75rem;
  z-index: 3;
  background: rgba(0,0,0,.62);
  color: #fff;
  font-size: .78rem;
  font-weight: 600;
  border-radius: 50rem;
  padding: .2rem .65rem;
  letter-spacing: .02em;
}

.galeria-vacia {
  height: 300px;
  border-radius: var(--radius);
  background: var(--color-bg-soft);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Miniaturas: las de video llevan marca de play para distinguirlas. */
.galeria-miniaturas {
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  padding: .75rem .25rem .25rem;
  scrollbar-width: thin;
}
.galeria-miniatura {
  position: relative;
  flex: 0 0 auto;
  width: 76px;
  height: 56px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: .45rem;
  overflow: hidden;
  background: #e9ecef;
  cursor: pointer;
  opacity: .7;
  transition: opacity .15s ease, border-color .15s ease;
}
.galeria-miniatura img { width: 100%; height: 100%; object-fit: cover; }
.galeria-miniatura.activa { opacity: 1; border-color: var(--color-primary); }
.galeria-miniatura:hover { opacity: 1; }

.galeria-miniatura-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.3);
}
.galeria-miniatura-play svg { width: 20px; height: 20px; fill: #fff; margin-left: 2px; }

/* --- Ficha de información --- */
.detalle-ficha {
  background: #fff;
  border: 1px solid #e9ecef;
  border-radius: var(--radius);
  padding: 1.25rem;
}

.detalle-titulo-fila {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
}
.detalle-titulo {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.25;
  margin: 0;
}

/* Corazón al lado del título, en círculo con sombra suave */
.btn-favorito-ficha {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  background: #fff;
  border: 1px solid #e9ecef;
  box-shadow: 0 .15rem .55rem rgba(0,0,0,.1);
}
.btn-favorito-ficha.es-favorito { color: var(--color-accent); border-color: var(--color-accent); }
.btn-favorito-ficha.es-favorito svg { fill: var(--color-accent); }

.detalle-precio-fila {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .55rem;
  margin-top: .75rem;
}
.detalle-precio {
  font-size: 1.65rem;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.1;
}
.detalle-precio-mes { font-size: .95rem; font-weight: 400; color: #6c757d; }

.detalle-badge {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .05em;
  border-radius: .3rem;
  padding: .25rem .55rem;
  color: #fff;
}
.detalle-badge-venta { background: var(--color-accent); }
.detalle-badge-arriendo { background: var(--color-primary); }
.detalle-badge-estado { background: #495057; }

.detalle-ubicacion {
  display: flex;
  align-items: center;
  gap: .35rem;
  margin: .6rem 0 0;
  color: #6c757d;
  font-size: .92rem;
}
.detalle-ubicacion svg,
.ubicacion-texto svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linejoin: round;
}

/* --- Fila de especificaciones --- */
.detalle-specs {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .25rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #e9ecef;
}
.detalle-specs .spec {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  font-size: .85rem;
  font-weight: 600;
  color: #343a40;
  text-align: center;
}
.detalle-specs .spec + .spec { border-left: 1px solid #e9ecef; }
.detalle-specs svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- Pestañas --- */
.detalle-tabs {
  display: flex;
  gap: .25rem;
  overflow-x: auto;
  border-bottom: 1px solid #e9ecef;
  margin-top: 1.5rem;
  scrollbar-width: none;
}
.detalle-tabs::-webkit-scrollbar { display: none; }

.detalle-tab {
  flex: 0 0 auto;
  border: 0;
  background: none;
  padding: .75rem 1rem;
  font-size: .95rem;
  color: #6c757d;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.detalle-tab.active {
  color: #212529;
  font-weight: 700;
  border-bottom-color: var(--color-accent);
}

.detalle-paneles { padding-top: 1.25rem; }

/* --- Descripción con "Ver más" --- */
.descripcion-texto {
  color: #495057;
  line-height: 1.65;
  white-space: pre-line;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.descripcion-texto.expandida {
  -webkit-line-clamp: unset;
  line-clamp: unset;
  overflow: visible;
}
.descripcion-vermas {
  border: 0;
  background: none;
  padding: .35rem 0 0;
  color: var(--color-accent);
  font-weight: 600;
  font-size: .92rem;
  cursor: pointer;
}

/* --- Chips de características --- */
.chips-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .55rem;
  margin-top: 1.25rem;
}
.chip {
  display: flex;
  align-items: center;
  gap: .5rem;
  background: var(--color-bg-soft);
  border-radius: .55rem;
  padding: .6rem .75rem;
  font-size: .85rem;
  color: #343a40;
  line-height: 1.25;
}
.chip-icono {
  width: 19px;
  height: 19px;
  flex-shrink: 0;
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- Lista de datos (pestaña Características) --- */
.lista-datos { margin: 0; }
.lista-datos > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .6rem 0;
  border-bottom: 1px solid #f1f3f5;
}
.lista-datos dt { color: #6c757d; font-weight: 400; font-size: .9rem; }
.lista-datos dd { margin: 0; font-weight: 600; font-size: .9rem; text-align: right; }

/* --- Ubicación --- */
.mapa-embed {
  width: 100%;
  height: 190px;
  border: 0;
  border-radius: var(--radius);
  display: block;
}
.ubicacion-pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .85rem;
}
.ubicacion-texto {
  display: flex;
  align-items: center;
  gap: .35rem;
  margin: 0;
  color: #495057;
  font-size: .92rem;
}
.ubicacion-link {
  color: var(--color-accent);
  font-weight: 600;
  font-size: .92rem;
  text-decoration: none;
  white-space: nowrap;
}

/* --- Botones de acción --- */
.detalle-acciones {
  display: flex;
  gap: .65rem;
  margin-top: 1rem;
}
.detalle-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding: .8rem .75rem;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: .95rem;
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: background-color .15s ease, color .15s ease;
}
.detalle-btn svg { width: 19px; height: 19px; flex-shrink: 0; }
.detalle-btn svg:not(.icono-whatsapp) {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.detalle-btn .icono-whatsapp { fill: currentColor; }

.detalle-btn-agendar {
  background: #fff;
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.detalle-btn-agendar:hover { background: var(--color-primary); color: #fff; }

.detalle-btn-whatsapp { background: var(--color-whatsapp); color: #fff; }
.detalle-btn-whatsapp:hover { background: #1eb855; color: #fff; }

/* ---------------- Escritorio: dos columnas ---------------- */
@media (min-width: 992px) {
  .detalle-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    grid-template-rows: auto auto auto;
    column-gap: 2.5rem;
    align-items: start;
  }
  .detalle-galeria { grid-column: 1; grid-row: 1; }
  .detalle-tabs    { grid-column: 1; grid-row: 2; }
  .detalle-paneles { grid-column: 1; grid-row: 3; }
  .detalle-panel {
    grid-column: 2;
    grid-row: 1 / span 3;
    position: sticky;
    top: 90px;
  }
}

/* ---------------- Móvil: galería a sangre y acciones fijas ---------------- */
@media (max-width: 991.98px) {
  .detalle-contenedor { padding-left: 0; padding-right: 0; max-width: 100%; }
  .detalle-migas { display: none; }
  .detalle-inmueble { position: relative; }

  /* En esta vista la navegación la hacen la flecha de volver, la pastilla
     "Buscar más" y la barra inferior, así que la barra blanca del sitio sobra
     y le quita altura a la foto. */
  body:has(.detalle-inmueble) .navbar { display: none; }

  /* Las miniaturas son para escritorio: en móvil se navega deslizando, y el
     contador "1 / 24" ya dice dónde va uno. Además dejarlas aquí rompería la
     unión redondeada entre la media y la ficha. */
  .galeria-miniaturas { display: none; }

  /* Cabecera semitransparente encima de la media, no una barra sólida */
  .detalle-header {
    position: absolute;
    top: .85rem;
    left: .85rem;
    right: .85rem;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  /* La galería va de borde a borde */
  .detalle-galeria .carousel-inner { border-radius: 0; }
  .detalle-galeria .carousel-item img,
  .detalle-galeria .galeria-video video { height: 300px; }
  .galeria-miniaturas { padding-left: 1rem; padding-right: 1rem; }

  /* La ficha sube y monta sobre la media: esa es la unión redondeada. */
  .detalle-panel {
    position: relative;
    z-index: 2;
    margin-top: -1rem;
  }
  .detalle-ficha {
    border-radius: 1rem 1rem 0 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    padding: 1.25rem 1rem;
  }

  .detalle-tabs,
  .detalle-paneles { padding-left: 1rem; padding-right: 1rem; }
  .detalle-tabs { margin-top: 1rem; }

  /* Barra de acciones fija, justo encima de la barra de navegación global */
  .detalle-acciones {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(4.25rem + env(safe-area-inset-bottom));
    z-index: 1035;
    margin: 0;
    padding: .7rem 1rem;
    background: #fff;
    border-top: 1px solid #e9ecef;
    box-shadow: 0 -.25rem .9rem rgba(0,0,0,.06);
  }

  /* Aire al final para las dos barras superpuestas. */
  body:has(.detalle-inmueble) {
    padding-bottom: calc(8.75rem + env(safe-area-inset-bottom));
  }

  /* Con dos barras abajo el botón flotante estorba, y la acción de WhatsApp
     ya está en la barra de este mismo detalle. */
  body:has(.detalle-inmueble) .whatsapp-flotante { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .galeria-play,
  .detalle-btn,
  .detalle-tab,
  .galeria-miniatura { transition: none; }
}