/* ── Cabañas Paseo del Sur — Widget de disponibilidad ─────────────────────── */

.calendario-cabana {
  /* Ancho exacto: grilla 7×28px + 6×2px gaps = 208px + 2×5px padding = 218px */
  width: 218px;
  max-width: 100%;   /* se achica en pantallas muy angostas */
  margin: 1rem auto;
  padding: .6rem 5px .75rem;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 12px;
  color: #333;
  background: #fff;
  border: 1px solid #dde8dd;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,.07);
  box-sizing: border-box;
}

/* Título */
.cc-titulo {
  text-align: center;
  font-size: .95em;
  font-weight: 700;
  color: #2c7a4b;
  margin: 0 0 .5rem;
  padding-bottom: .4rem;
  border-bottom: 1px solid #e8f2e8;
  line-height: 1.35;
}

/* Navegación de mes */
.cc-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;  /* ◀ en el borde izq, ▶ en el borde der, alineados con la grilla */
  margin-bottom: .45rem;
}

.cc-mes-label {
  font-weight: 700;
  font-size: .9em;
  color: #222;
  text-transform: capitalize;
}

.cc-btn-nav {
  background: none;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: .18rem .45rem;
  cursor: pointer;
  font-size: .8em;
  color: #666;
  line-height: 1;
  transition: background .15s;
}
.cc-btn-nav:hover { background: #f4f4f4; }

/* Leyenda */
.cc-leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .55rem;
  margin-bottom: .45rem;
  font-size: .76em;
  color: #666;
}

.cc-leg {
  display: flex;
  align-items: center;
  gap: .28rem;
}

.cc-leg::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex-shrink: 0;
}

.cc-leg--d::before { background: #3dbc74; }
.cc-leg--o::before { background: #e05252; }
.cc-leg--p::before { background: #ccc; border: 1px solid #bbb; }

/* Grilla: columnas fijas de 28px → tamaño absoluto controlado */
.cc-grid {
  display: grid;
  grid-template-columns: repeat(7, 28px);
  gap: 2px;
}

.cc-gh {
  width: 28px;
  text-align: center;
  font-size: .68em;
  font-weight: 700;
  color: #bbb;
  padding: .15rem 0 .2rem;
  text-transform: uppercase;
}

/* Celdas */
.cc-celda {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  font-size: .88em;
  font-weight: 500;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.cc-vacio { background: none; }

/* Verde: disponible */
.cc-dis {
  background: #3dbc74;
  color: #fff;
  cursor: pointer;
  transition: filter .12s, transform .1s;
}
.cc-dis:hover   { filter: brightness(1.1); transform: scale(1.08); }
.cc-dis:active  { filter: brightness(.88); transform: scale(.92); }
.cc-dis:focus-visible { outline: 2px solid #1e7a46; outline-offset: 1px; }

/* Rojo: ocupado */
.cc-ocu {
  background: #e05252;
  color: #fff;
  cursor: not-allowed;
  opacity: .8;
}

/* Pasado: sin fondo, número atenuado — no confunde con el fondo de la página */
.cc-pas {
  color: #ccc;
  font-weight: 400;
}

/* Estados */
.cc-loading,
.cc-error {
  text-align: center;
  padding: 1rem .5rem;
  color: #aaa;
  font-size: .9em;
}
.cc-error { color: #c0392b; }