.personal-calendar-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(290px, .65fr);
  gap: 20px;
  align-items: start;
}

.calendar-card,
.calendar-agenda,
.calendar-form {
  padding: 24px;
}

.calendar-toolbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}

.calendar-toolbar > div {
  display: flex;
  gap: 7px;
}

.calendar-toolbar h3 {
  margin: 0;
  font: 700 24px Georgia, serif;
  text-transform: capitalize;
  text-align: center;
}

.calendar-icon-button {
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
}

.calendar-icon-button:hover {
  border-color: #a8c7b3;
  background: #f2f8f4;
}

.calendar-weekdays,
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.calendar-weekdays {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-align: center;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
}

.calendar-day,
.calendar-day-empty {
  min-height: 102px;
}

.calendar-day {
  border: 0;
  border-right: 1px solid #edf1ee;
  border-bottom: 1px solid #edf1ee;
  background: #fff;
  color: var(--ink);
  padding: 10px;
  text-align: left;
  cursor: pointer;
  position: relative;
}

.calendar-day:nth-child(7n) {
  border-right: 0;
}

.calendar-day:hover,
.calendar-day.selected {
  background: #eef8f1;
}

.calendar-day.selected {
  box-shadow: inset 0 0 0 2px var(--green2);
}

.calendar-day.today .calendar-number {
  background: var(--green);
  color: #fff;
}

.calendar-number {
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 800;
}

.calendar-dots {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 13px;
}

.calendar-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3d83c5;
}

.calendar-dot.importante { background: #d4473d; }
.calendar-dot.entrega { background: #e49a16; }
.calendar-dot.reunion { background: #7956bd; }
.calendar-dot.clase { background: #1c9a62; }

.calendar-more {
  font-size: 10px;
  color: var(--muted);
  margin-top: 7px;
}

.calendar-agenda {
  position: sticky;
  top: 98px;
}

.calendar-agenda-head h3,
.calendar-form h3 {
  margin: 5px 0 0;
  font: 700 25px Georgia, serif;
}

.calendar-events {
  display: grid;
  gap: 10px;
  margin-top: 20px;
}

.calendar-event {
  border: 1px solid var(--line);
  border-left: 4px solid #3d83c5;
  border-radius: 13px;
  padding: 13px;
  background: #fff;
}

.calendar-event[data-type="importante"] { border-left-color: #d4473d; }
.calendar-event[data-type="entrega"] { border-left-color: #e49a16; }
.calendar-event[data-type="reunion"] { border-left-color: #7956bd; }
.calendar-event[data-type="clase"] { border-left-color: #1c9a62; }
.calendar-event.completed { opacity: .58; }
.calendar-event.completed strong { text-decoration: line-through; }

.calendar-event strong {
  display: block;
  line-height: 1.35;
}

.calendar-event-meta {
  color: var(--muted);
  font-size: 11px;
  margin-top: 4px;
}

.calendar-event p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  margin: 8px 0 0;
}

.calendar-event-actions {
  display: flex;
  gap: 7px;
  margin-top: 11px;
}

.calendar-event-actions button {
  border: 0;
  border-radius: 8px;
  padding: 6px 9px;
  background: #eef4f0;
  color: var(--green);
  font-size: 11px;
  font-weight: 750;
  cursor: pointer;
}

.calendar-event-actions button[data-calendar-delete] {
  background: #fff0f0;
  color: #aa3030;
}

.calendar-form {
  margin-top: 20px;
}

@media (max-width: 980px) {
  .personal-calendar-layout { grid-template-columns: 1fr; }
  .calendar-agenda { position: static; }
}

@media (max-width: 650px) {
  .calendar-heading .primary { width: 100%; }
  .calendar-card, .calendar-agenda, .calendar-form { padding: 15px; }
  .calendar-toolbar { grid-template-columns: 1fr auto; }
  .calendar-toolbar h3 { grid-column: 1 / -1; grid-row: 1; font-size: 21px; }
  .calendar-toolbar > div { grid-column: 1 / -1; grid-row: 2; justify-content: center; }
  .calendar-day, .calendar-day-empty { min-height: 62px; }
  .calendar-day { padding: 5px; }
  .calendar-number { width: 25px; height: 25px; }
  .calendar-more { display: none; }
}