/* ---------- Detalle de alojamiento ---------- */
/* La cantidad de fotos por propiedad varía (ver detalle-alojamiento.js,
   renderGallery) — cada cantidad de 1 a 4 tiene su propio mosaico para no
   dejar huecos vacíos en el grid; de 5 en adelante se usa el mosaico
   "grande + 4 chicas" de siempre, con un aviso "+N" en la última si hay
   más fotos de las que entran como miniatura (esas se ven igual en el
   lightbox, con flechas). */
.detalle-gallery { display: grid; gap: 10px; border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra); height: 420px; }
.detalle-gallery--1 { grid-template-columns: 1fr; }
.detalle-gallery--2 { grid-template-columns: 1fr 1fr; }
.detalle-gallery--3 { grid-template-columns: 2fr 1fr; grid-template-rows: repeat(2, 1fr); }
.detalle-gallery--3 button:first-child { grid-row: 1 / 3; }
.detalle-gallery--4 { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(2, 1fr); }
.detalle-gallery--5plus { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: repeat(2, 1fr); }
.detalle-gallery--5plus button:first-child { grid-row: 1 / 3; }
/* Estos botones reusan la clase .tour-item (aspect-ratio:4/3 para otro uso
   del sitio) — acá el alto ya lo define el grid (fila simple o el spane de
   2 filas de la foto grande), así que hay que anular ese aspect-ratio o la
   foto grande se estira más de la cuenta y se monta sobre la fila de abajo. */
.detalle-gallery button { position: relative; border: none; padding: 0; cursor: pointer; overflow: hidden; background: none; aspect-ratio: auto; }
.detalle-gallery img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s; }
.detalle-gallery button:hover img { transform: scale(1.05); }
.detalle-gallery .tour-item__more {
  position: absolute; inset: 0;
  background: rgba(37, 89, 87, 0.6);
  color: var(--blanco);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ff-titulo);
  font-size: 1.6rem;
  font-weight: 600;
}

/* .detalle-layout es una .row: col-lg-7 (descripción) y col-lg-5 (reserva). */
.detalle-layout { margin-top: 16px; }
.detalle-title { font-size: 2rem; margin-bottom: 6px; }
.detalle-loc { color: var(--texto-suave); font-size: 0.95rem; }
.detalle-subtitle { font-size: 1.3rem; }
.detalle-meta-row { display: flex; gap: 22px; flex-wrap: wrap; margin: 16px 0 26px; color: var(--texto-suave); font-size: 0.92rem; }
.detalle-meta-row span { display: flex; align-items: center; gap: 6px; }
.detalle-meta-row i { color: var(--dorado); }
.amenities-grid { margin-top: 12px; margin-bottom: 30px; }
.amenities-grid span { display: flex; align-items: center; gap: 10px; font-size: 0.92rem; color: var(--texto); }
.amenities-grid i { color: var(--petroleo); }
.detalle-map { border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra); margin: 20px 0; }
.detalle-map iframe { width: 100%; height: 280px; border: none; display: block; }

/* La grilla y las celdas del calendario reutilizan .datepicker* (definidas en
   15-listings.css para el buscador de Alojamientos), así ambos calendarios
   del sitio se ven y comportan igual. Acá solo queda el estado "ocupado"
   (distinto de "is-disabled", que ya cubre los días pasados) y la leyenda. */
.datepicker__day.is-occupied { color: var(--texto-suave); text-decoration: line-through; opacity: 0.5; cursor: not-allowed; }
.calendario-nota { display: flex; gap: 16px; font-size: 0.8rem; color: var(--texto-suave); align-items: center; margin-top: 10px; }
.calendario-nota span { display: flex; align-items: center; gap: 6px; }
.calendario-nota__dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.calendario-nota__dot--libre { background: var(--crema-2); border: 1px solid var(--borde); }
.calendario-nota__dot--ocupado { background: var(--texto-suave); opacity: 0.5; }

.booking-card { background: var(--superficie); border-radius: var(--radio); box-shadow: var(--sombra); padding: 28px; }
.booking-card .price-row { font-family: var(--ff-titulo); font-size: 1.5rem; color: var(--petroleo-oscuro); margin-bottom: 18px; }
.booking-card .price-row span { font-family: var(--ff-cuerpo); font-size: 0.8rem; color: var(--texto-suave); }
.booking-card .field { margin-bottom: 16px; }
.booking-card__note { font-size: 0.78rem; color: var(--texto-suave); margin-top: 14px; text-align: center; }
.booking-dates-summary {
  border: 1px solid var(--borde);
  border-radius: 8px;
  padding: 11px 14px;
  font-family: var(--ff-cuerpo);
  font-size: 0.86rem;
  color: var(--texto);
  background: var(--crema);
}
/* .field--invalid (17-forms.css) pinta el borde de inputs, selects y
   textareas; acá el campo de fechas es un div, así que necesita su propia
   regla para marcarse en rojo junto al <small class="error">. */
.field--invalid .booking-dates-summary { border-color: #b0432f; }

.booking-calendar { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--borde); }
.booking-calendar h4 { font-size: 0.95rem; margin-bottom: 14px; }

.demo-note {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--crema-2);
  border: 1px dashed var(--dorado);
  border-radius: var(--radio);
  padding: 14px 18px;
  font-size: 0.85rem;
  color: var(--texto-suave);
  margin-bottom: 24px;
}
.demo-note i { color: var(--dorado); font-size: 1.1rem; flex-shrink: 0; }