.availability-calendar{
    max-width:1000px;
    margin:0 auto;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}

.calendar-month{
    background:white;
    border-radius:16px;
    padding:16px;
    box-shadow:0 8px 20px rgba(0,0,0,.08);
}

.calendar-month h3{
    text-align:center;
    color:var(--color-principal);
    font-size:1.2rem;
    margin-bottom:12px;
}

.calendar-grid{
    display:grid;
    grid-template-columns:repeat(7,1fr);
    gap:3px;
}

.calendar-day-name{
    text-align:center;
    font-size:.7rem;
    font-weight:700;
    color:#777;
}

.calendar-day{
    aspect-ratio:1;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:6px;
    font-size:.75rem;
    background:#edf8ef;
    color:#1d6b32;
}

.calendar-day.ocupada{
    background:#ffecec;
    color:#9b1c1c;
}

.calendar-day.empty{
    background:transparent;
}

.calendar-legend{
    display:flex;
    justify-content:center;
    gap:25px;
    margin-bottom:25px;
}

.calendar-legend span{
    display:flex;
    align-items:center;
    gap:8px;
}

.calendar-legend i{
    width:16px;
    height:16px;
    border-radius:4px;
}

.calendar-legend .libre{
    background:#edf8ef;
    border:1px solid #bfe6c8;
}

.calendar-legend .ocupada{
    background:#ffecec;
    border:1px solid #f0b8b8;
}

@media(max-width:900px){

    .availability-calendar{
        grid-template-columns:1fr;
        max-width:450px;
    }

}