/* ══════════════════════════════════════════════════════════════
   HOTEL.CSS  —  Estilos del módulo de Hotel
   ══════════════════════════════════════════════════════════════ */

/* ── Mapa de habitaciones ─────────────────────────────────── */
.hotel-mapa-wrapper {
  overflow-x: auto;
}
.hotel-room-card {
  transition: transform .12s, box-shadow .12s;
}
.hotel-room-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
}

/* ── Resumen badges en header de sección ─────────────────── */
.hotel-status-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.hotel-status-badge {
  font-size: .78rem;
  padding: 4px 12px;
  border-radius: 12px;
  font-weight: 600;
}

/* ── Folio modal ─────────────────────────────────────────── */
#modal-hotel-folio .modal-body {
  max-height: 65vh;
  overflow-y: auto;
}
.hotel-folio-total-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  padding: 12px 0 0;
  border-top: 1.5px solid var(--border);
  font-size: 1.05rem;
  font-weight: 700;
}

/* ── Housekeeping grid ───────────────────────────────────── */
#hotel-housekeeping-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}

/* ── Panel de tipos (collapsible) ──────────────────────────── */
#hotel-tipos-panel {
  margin-top: 24px;
  border-top: 1.5px solid var(--border);
  padding-top: 20px;
}

/* ── Tabs check-in ──────────────────────────────────────── */
.hotel-tab-btn {
  padding: 6px 16px;
  border: 1.5px solid var(--border);
  border-radius: 8px 8px 0 0;
  background: var(--bg-secondary);
  color: var(--text-muted);
  cursor: pointer;
  font-size: .85rem;
  font-weight: 600;
  border-bottom: none;
  transition: background .12s;
}
.hotel-tab-btn.active {
  background: var(--bg);
  color: var(--primary);
  border-bottom: 2px solid var(--bg);
  position: relative;
  top: 1px;
}

/* ── Reporte de ocupación ──────────────────────────────── */
#hotel-rep-container {
  margin-top: 16px;
}

/* ── Responsividad básica ──────────────────────────────── */
@media (max-width: 600px) {
  #hotel-housekeeping-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }
  .hotel-status-badges {
    gap: 6px;
  }
}

/* ── Secciones hotel: forzar scroll en la página ───────── */
/* El section.active es flex column; sin flex-shrink:0 los hijos
   se encogen para caber y nunca hay overflow → no hay scroll.
   Con flex-shrink:0 el contenido desborda y la sección scrollea. */
#section-hotel-habitaciones > *,
#section-hotel-checkin > *,
#section-hotel-housekeeping > * {
  flex-shrink: 0;
}

/* ── Laptop / pantalla pequeña ≤ 1366px ────────────────── */
@media (max-width: 1366px) {
  /* Cards del mapa más compactas */
  .hotel-room-card {
    min-width: 110px !important;
    max-width: 130px !important;
    padding: 8px 10px !important;
  }
  /* Mapa: limitar altura para no tapar la tabla debajo */
  #hotel-mapa-container {
    max-height: 210px;
    overflow-y: auto;
    scrollbar-width: thin;
  }
  /* Piso label más pequeño */
  #hotel-mapa-container [style*="text-transform:uppercase"] {
    font-size: .72rem !important;
    margin-bottom: 6px !important;
  }
  /* Scroll horizontal en tablas */
  #hotel-cat-wrap,
  #section-hotel-checkin .card {
    overflow-x: auto;
  }
}