/* ==========================================
   1. PORTADA Y CONTENEDORES (Habitaciones)
   ========================================== */
.cc-hab-card-portada, .cc-hab-card { 
    border: 1px solid #e0e0e0; 
    border-radius: 12px; 
    margin-bottom: 20px; 
    background: #fff; 
    overflow: hidden; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}

/* Slider y Fotos de Portada */
.cc-swiper-container { 
    width: 100%; 
    height: 250px; 
    position: relative; 
    overflow: hidden; 
    background: #f9f9f9; 
    border-radius: 12px;
}

.cc-img-slider, .cc-img-principal { 
    width: 100% !important; 
    height: 250px !important; 
    object-fit: cover !important; 
    display: block; 
}

.cc-slides-wrapper { 
    display: flex; 
    overflow: hidden; 
    scroll-behavior: smooth; 
    height: 100%; 
    border-radius: 12px;
}

/* Badges y Camas en Portada */
.cc-portada-camas-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }

.cc-badge-cama { 
    background: #f0f7ff; 
    padding: 4px 8px; 
    border-radius: 5px; 
    font-size: 11px; 
    display: flex; 
    align-items: center; 
    gap: 5px; 
    border: 1px solid #d0e7ff; 
}

/* ==========================================
   2. UI / BOTONES Y ACCIONES
   ========================================== */
.cc-portada-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px;
    height: 34px;
    line-height: 1;
    border-radius: 6px;
    font-weight: bold;
    font-size: 12px;
    box-sizing: border-box;
    white-space: nowrap;
}
.cc-portada-btn:focus { outline: none; }

/* Header de habitación en edición */
.cc-hab-header {
    padding: 12px 18px;
    background: #fdfdfd;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.cc-hab-info-min { display: flex; align-items: center; gap: 12px; }

.cc-mini-foto-acc {
    width: 40px; height: 40px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid #eee;
}

.cc-hab-titulo-text { font-weight: 600; color: #444; }

/* ==========================================
   3. ÁREA DE EDICIÓN Y GESTIÓN DE FOTOS
   ========================================== */
.cc-area-fotos { margin-bottom: 25px; clear: both; }

.cc-foto-slot { 
    position: relative; 
    width: 100px !important; 
    height: 100px !important; 
    border-radius: 10px; 
    border: 2px dashed #ccc; 
    background: #f9f9f9;
    overflow: visible; /* Para que el botón de borrar sobresalga */
    display: flex;
    align-items: center;
    justify-content: center;
}

.cc-foto-slot img { 
    width: 100% !important; 
    height: 100% !important; 
    object-fit: cover !important; 
    border-radius: 10px;
    display: block;
}

/* Botón Borrar (Cesto) */
.cc-borrar-img-db { 
    position: absolute; 
    top: -8px; 
    right: -8px; 
    background: #ff385c !important; 
    color: #fff !important; 
    width: 26px; 
    height: 26px; 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    cursor: pointer; 
    border: 2px solid #fff; 
    z-index: 20; 
    font-size: 12px; 
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    transition: transform 0.2s ease;
}

.cc-borrar-img-db:hover { transform: scale(1.2); background: #e31c5f !important; }

/* Grilla de Camas en edición */
.cc-grid-camas {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #eee;
}

/* ==========================================
   4. VENTANAS MODALES
   ========================================== */
.cc-modal { 
    position: fixed; 
    top: 0; left: 0; 
    width: 100%; height: 100%; 
    background: rgba(0,0,0,0.85); 
    z-index: 99999; 
    backdrop-filter: blur(5px); 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}

.cc-modal-content { 
    background: #fff; 
    width: 90%; 
    max-width: 600px; 
    padding: 25px; 
    border-radius: 20px; 
    position: relative; 
    max-height: 90vh; 
    overflow-y: auto; 
}

.cc-close-modal { 
    position: absolute; 
    right: 20px; top: 15px; 
    font-size: 30px; 
    cursor: pointer; 
    color: #999; 
}

/* ==========================================
   5. RESPONSIVE (Móviles)
   ========================================== */

/* Anti-desborde global (recomendado) */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

.cc-hab-card-portada,
.cc-hab-card,
.cc-swiper-container {
  max-width: 100%;
  overflow: hidden;
}

/* Slider: evita micro desbordes */
.cc-slides-wrapper {
  width: 100%;
  overflow: hidden;
}

.cc-slides-wrapper img {
  flex: 0 0 100%;
  min-width: 100% !important;
  max-width: 100%;
  display: block;
}

/* =========================
   MOBILE (<= 768px)
   ========================= */
@media (max-width: 768px) {

  /* Iconos meta */
  .cc-hab-iconos-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
  }

  .cc-hab-iconos-meta .cc-flecha-toggle,
  .cc-hab-iconos-meta .cc-eliminar-hab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  .cc-hab-iconos-meta .cc-eliminar-hab { margin-left: 6px; }

  /* Slots fotos */
  .cc-foto-slot {
    width: 80px !important;
    height: 80px !important;
  }

  /* BOTONES PORTADA: vertical en móvil */
  .cc-portada-btn-row{
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .cc-portada-btn{
    width: 100% !important;
    flex: none !important;
    height: auto !important;
    padding: 12px 10px !important;
    white-space: normal !important;
    line-height: 1.2 !important;
    text-align: center !important;
  }
}

/* (Opcional) Si quieres mantenerlo también para móviles muy pequeños,
   ya queda cubierto por <=768px, así que NO hace falta el de 480px. */
   
   
 .ch-badge-principal{
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 20;
  background: #ffb703;
  color: #000;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}
  
 .cc-hab-card-portada{ position: relative; }
 .cc-slides-wrapper{ scroll-snap-type: x mandatory; }
.cc-slides-wrapper > *{ scroll-snap-align: start; }
   
 .cc-slide{
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  position: relative;
}

.cc-slide img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
  
.cc-slides-wrapper > img{
  flex: 0 0 100%;     /* CLAVE: cada imagen ocupa 1 pantalla */
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
   
   
.cc-slides-wrapper{ scroll-snap-type: x mandatory; }
.cc-slides-wrapper > *{ scroll-snap-align: start; }
   
   
.cc-nota-textarea{ width:70%; }
@media (max-width:768px){
  .cc-nota-textarea{ width:100%; }
}
   
   
   
/* Escritorio */
.cc-swiper-container{
  height: 300px;
}

/* Móvil */
@media (max-width:768px){
  .cc-swiper-container{
    height: 200px; /* o 180px si lo quieres más compacto */
  }
}
   
   
.cc-close-modal{
  position: absolute;
  top: 10px;
  right: 12px;
  font-size: 28px;
  font-weight: 900;
  cursor: pointer;
  color: #e63946;           /* ROJA */
  background: #fff;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  z-index: 1000;
}

/* alternativa azul */
.cc-close-modal.cc-azul{
  color: #0077ff;
}