#calendario{
  padding:60px 20px;
  background:linear-gradient(135deg,#f7f9fc,#eef2f7);
}

.calendar-wrapper{
  display:flex;
  gap:40px;
  justify-content:center;
  flex-wrap:wrap;
}

.calendar-card{
  background:white;
  border-radius:18px;
  padding:20px;
  box-shadow:0 10px 25px rgba(0,0,0,0.08);
  width:500px;
  transition:.3s;
}

.calendar-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:15px;
}

.calendar-header button{
  border:none;
  background:#007BFF;
  color:white;
  width:35px;
  height:35px;
  border-radius:8px;
  cursor:pointer;
  font-size:18px;
}

.calendar-header button:hover{
  background:#0056b3;
}

.weekdays{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  text-align:center;
  font-weight:bold;
  margin-bottom:8px;
  color:#666;
}

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

.day{
  padding:12px 0;
  text-align:center;
  border-radius:8px;
  background:#f1f3f7;
  transition:.2s;
}

.day:hover{
  background:#e2e6ef;
}

.today{
  background:#007BFF;
  color:white;
  font-weight:bold;
}

.event-day{
  background:#ffc107;
  font-weight:bold;
}

.events-card{
  background:white;
  border-radius:18px;
  padding:20px;
  box-shadow:0 10px 25px rgba(0,0,0,0.08);
  width:500px;
}

.events-card ul{
  padding-left:0;
  list-style:none;
}

.events-card li{
  margin-bottom:10px;
  border-left:4px solid #ffc107;
  padding-left:8px;
}