/* =========================
   SALAS (solo esta página)
   ========================= */

.roomsGrid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:22px;
  margin-top:16px;
}

@media (max-width:1100px){
  .roomsGrid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width:650px){
  .roomsGrid{ grid-template-columns: 1fr; }
}

.roomCard{
  border:1px solid #e6e8ef;
  background:#fff;
  border-radius:18px;
  overflow:hidden;
  box-shadow: 0 14px 40px rgba(0,0,0,.08);
}

.roomCard__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 14px 10px;
}

.roomCard__title{
  margin:0;
  font-weight:950;
  font-size:1.1rem;
}

.roomBadge{
  border:1px solid #e6e8ef;
  background:#f7f8fb;
  border-radius:999px;
  padding:7px 10px;
  font-weight:950;
  font-size:.9rem;
}

.roomPreview{
  width:100%;
  border:none;
  padding:0;
  background:transparent;
  cursor:pointer;
  text-align:left;
  position:relative;
  display:block;
}

.roomImg{
  width:100%;
  height:290px;
  object-fit:cover;
  display:block;
}

@media (max-width:650px){
  .roomImg{ height:320px; }
}

.roomHint{
  position:absolute;
  left:14px;
  bottom:14px;
  background:rgba(17,17,17,.72);
  color:#fff;
  font-weight:900;
  font-size:.98rem;
  padding:10px 12px;
  border-radius:999px;
  pointer-events:none;
}

/* =========================
   SALA 1 — miniaturas (FIX “doble”)
   Forzamos a que TODO img dentro de .roomThumbs
   sea pequeño SIEMPRE, aunque alguna clase falle.
   ========================= */
.roomThumbs{
  display:flex;
  gap:10px;
  padding:12px 14px 14px;
  overflow-x:auto;
}

.roomThumbs img{
  width:64px !important;
  height:44px !important;
  object-fit:cover !important;
  border-radius:12px !important;
  border:1px solid #e6e8ef !important;
  background:#fff !important;
  flex:0 0 auto !important;
  display:block !important;
}

/* =========================
   LIGHTBOX SALAS
   ========================= */
.roomLB{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding:16px;
  z-index:99999;
}
.roomLB.isOpen{ display:flex; }

.roomLB__backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.62);
}

.roomLB__panel{
  position:relative;
  z-index:2;
  width:min(1100px, 96vw);
  max-height:92vh;
  background:#fff;
  border-radius:22px;
  border:1px solid #e6e8ef;
  box-shadow:0 18px 70px rgba(0,0,0,.30);
  padding:14px;
  overflow:hidden;
}

.roomLB__close{
  position:absolute;
  top:12px;
  right:12px;
  width:44px;
  height:44px;
  border-radius:999px;
  border:1px solid #e6e8ef;
  background:#fff;
  cursor:pointer;
  font-size:18px;
}

.roomLB__topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:8px 8px 12px;
}

.roomLB__room{
  font-weight:950;
  font-size:1.05rem;
}

/* Contenedor de imagen + flechas laterales */
.roomLB__media{
  position:relative;
  border-radius:16px;
  border:1px solid #e6e8ef;
  background:#f7f8fb;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:12px;
}

.roomLB__img{
  width:100%;
  max-height:78vh;
  object-fit:contain;
  display:block;
  border-radius:14px;
  border:1px solid #e6e8ef;
  background:#fff;
}

/* Flechas a los lados */
.roomLB__navSide{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:54px;
  height:54px;
  border:none;
  border-radius:999px;
  background:rgba(255,255,255,.96);
  cursor:pointer;
  font-size:34px;
  box-shadow:0 10px 22px rgba(0,0,0,.12);
  z-index:5;
}

.roomLB__navSide--left{ left:14px; }
.roomLB__navSide--right{ right:14px; }

.roomLB__keys{
  margin-top:10px;
  color:#6b7280;
  font-size:1.02rem;
  font-weight:850;
  padding:0 8px 6px;
}

@media (max-width:650px){
  .roomLB__navSide{
    width:48px;
    height:48px;
    font-size:30px;
  }
}