:root {
  --muted: #777777;
  --border: #dcdcdc;
  --no-lectivo-bg: #e3ebf7;
  --today-ring: #666666;
}
.calendar {
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap:20px;
  user-select: none;           /* Estándar */
  -webkit-user-select: none;   /* Safari */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* Internet Explorer/Edge */
}
.month {
  padding:6px;
  background:#fff;
  display:flex; flex-direction:column;
}
.month h2 {
  margin:0 0 4px;
  font-size:16px;
  font-weight: bold;
  text-align:center;
  padding: 5px 0px;
}

.month.current-academic h2 {
  background-color: #e6b8b8;
}

.month.next-academic h2 {
  background-color: #f9bf8f;
}

.grid {
  display:grid;
  grid-template-columns: repeat(7,1fr);
  gap:2px;
}
.dow {
  font-size:10px;
  color:var(--muted);
  text-align:center;
}
.day {
  position:relative;
  min-height:36px;
  border:1px solid var(--border);
  border-radius:4px;
  background:#fff;
}
.day.closed {
  background:var(--no-lectivo-bg);
}
.day.today {
  outline:2px solid var(--today-ring);
  outline-offset:-2px;
}
.day-number {
  position:absolute;
  top:2px;
  left:4px;
  font-size:11px;
  font-weight:bold;
}
.day:has(.band) {
  cursor: pointer;
}
.bands {
  position:absolute;
  bottom:3px;
  left:3px;
  right:3px;
  display:flex;
  flex-direction:column-reverse;
  gap:2px;
}
.band {
  height:7px;
  border-radius:3px;  
}
.legend {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  font-size:14px;
  margin-top:10px;
}
.legend .item {
  display:flex;
  align-items:center;
  gap:6px;
}
.legend .swatch {
  width:14px;
  height:14px;
  border-radius:3px;
  border:1px solid var(--border);
}
.legend .bar {
  width:24px;
  height:6px;
  border-radius:3px;
}

@media screen and (max-width: 768px) {
  .calendar {
    display: block; /* Apila los meses */
  }

  .calendar .month {
    width: 100%;
    margin-bottom: 2rem;
  }

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

  .legend {
    font-size: 1.5rem;
    padding: 0.5rem;
    display: block;
  }

  .legend .item {
    margin-bottom: 10px;
  }

}


@page { size: A4; margin: 8mm; }