/* === WRAPPER MESES === */
.cal-wrapper{
  display:flex;
  gap:2rem;
  justify-content:center;
  flex-wrap:wrap;
}

/* === MES === */
.cal-month{
  background:#fff;
  border-radius:1rem;
  padding:1rem;
  box-shadow:0 8px 16px rgba(0,0,0,0.08);
  width:300px;
  flex-shrink:0;
}

.cal-month h3{
  text-align:center;
  color:#3E4D1F;
  margin-bottom:0.5rem;
}

/* === GRID DÍAS === */
.cal-grid{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:6px;
  text-align:center;
}

.cal-grid > div{
  padding:6px;
  border-radius:6px;
  font-size:0.9rem;
}

/* === ESTADOS DÍAS === */
.cal-day.free{
  background:#A8C3A0;
  color:#2e472c;
  transition:transform 0.2s ease, box-shadow 0.2s ease;
}

.cal-day.free:hover{
  transform:scale(1.05);
  box-shadow:0 4px 10px rgba(0,0,0,0.12);
}

.cal-day.booked{
  background:#9E2A2B;
  color:#fff;
}

/* === NAVEGACIÓN === */
.cal-nav-wrapper{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:360px; /* evita que las flechas "bailen" */
}

.cal-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:46px;
  height:46px;
  border-radius:50%;
  border:none;
  background:rgba(255,255,255,0.9);
  box-shadow:0 6px 18px rgba(0,0,0,0.12);
  cursor:pointer;
  transition:all 0.3s ease;
  z-index:10;
  display:flex;
  align-items:center;
  justify-content:center;
}

.cal-arrow::before{
  content:"";
  width:14px;
  height:14px;
  border-top:2px solid #3E4D1F;
  border-right:2px solid #3E4D1F;
}

/* Posiciones */
.cal-arrow.left{ left:0; }
.cal-arrow.left::before{ transform:rotate(-135deg); }

.cal-arrow.right{ right:0; }
.cal-arrow.right::before{ transform:rotate(45deg); }

/* Hover */
.cal-arrow:hover:not(:disabled){
  background:#6B8E23;
  box-shadow:0 8px 22px rgba(0,0,0,0.18);
}

.cal-arrow:hover:not(:disabled)::before{
  border-color:#fff;
}

/* Disabled */
.cal-arrow:disabled{
  opacity:0.25;
  cursor:default;
  box-shadow:none;
  background:rgba(255,255,255,0.7);
}

.cal-arrow:disabled::before{
  border-color:#999;
}

/* === LEYENDA === */
.cal-legend{
  display:flex;
  justify-content:center;
  gap:2rem;
  margin-top:1.2rem;
  font-size:0.95rem;
  color:#4A4A4A;
  font-weight:500;
}

.legend-item{
  display:flex;
  align-items:center;
  gap:0.5rem;
}

.legend-dot{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  width:14px;
  height:14px;
  min-width:14px;
  min-height:14px;
  border-radius:50%;
  flex-shrink:0;
  line-height:0;
}

.legend-dot.free{ background:#A8C3A0; }
.legend-dot.booked{ background:#9E2A2B; }

/* === TÍTULO === */
.cal-title{
  text-align:center;
  font-size:2rem;
  color:#2e472c;
  margin-bottom:1.2rem;
}

/* === RESPONSIVE === */
@media (max-width:1120px){
  .cal-wrapper{
    max-width:700px;
    margin:0 auto;
  }
}

@media (max-width:750px){
  .cal-wrapper{ max-width:340px; }
}

@media (max-width:720px){

  .cal-arrow{
    width:38px;
    height:38px;
  }

  .cal-arrow.left{ left:8px; }
  .cal-arrow.right{ right:8px; }

  .legend-dot{
    width:12px;
    height:12px;
    min-width:12px;
    min-height:12px;
  }

  .cal-legend{
    gap:1.2rem;
    font-size:0.9rem;
    margin-top:1rem;
  }
}

/* === DÍAS PASADOS === */
.cal-day.past{
  background:#eee;
  color:#999;
  opacity:0.6;
  cursor:not-allowed;
}

/* === BLINDAJE CONTRA estilos.css === */
.cal-grid{
  display:grid !important;
  grid-template-columns:repeat(7,1fr) !important;
}

.cal-wrapper{
  display:flex !important;
}

.cal-grid{ display:grid !important; }
.cal-day{ 
  border-radius:6px; 
  text-align:center; 
  font-weight:600;
}
.cal-day.free{ background:#A8C3A0 !important; color:#2e472c !important; }
.cal-day.booked{ background:#9E2A2B !important; color:#fff !important; }
.cal-day.past{ background:#eee !important; color:#999 !important; }

.cal-month{
  background:#fff !important;
  box-shadow:0 8px 16px rgba(0,0,0,0.08) !important;
  border-radius:1rem !important;
}

.cal-day{
  border-radius:6px;
  text-align:center;
  font-weight:600;
  padding:6px;
}

.cal-day.free{
  background:#A8C3A0;
  color:#2e472c;
}

.cal-day.booked{
  background:#9E2A2B;
  color:#fff;
}

.cal-day.past{
  background:#eee;
  color:#999;
  opacity:0.6;
}