/* ─── Variables ─── */
:root {
  --slot-h: 1.35rem;    /* altura de cada slot */
  --day-num-h: 2.15rem; /* altura del número de día */
}

.month-calendar {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: white;
}

/* Headers */
.month-calendar__day-of-week-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  border-bottom: 1px solid #e0e0e0;
  flex-shrink: 0;
}
.month-calendar__day-of-week {
  font-size: 0.7rem;
  font-weight: 500;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #70757a;
  padding: 0.15rem 0 0.9rem;
}

/* Wrapper */
.month-calendar__day-list-wrapper {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
}

/* Grid */
.month-calendar__day-list {
  list-style: none;
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  overflow: hidden;
}
.month-calendar--four-week .month-calendar__day-list { grid-template-rows: repeat(4, minmax(0, 1fr)); }
.month-calendar--five-week .month-calendar__day-list { grid-template-rows: repeat(5, minmax(0, 1fr)); }
.month-calendar--six-week  .month-calendar__day-list { grid-template-rows: repeat(6, minmax(0, 1fr)); }

/* Cells */
.month-calendar__day {
  display: flex;
  flex-direction: column;
  border-right: 1px solid #e0e0e0;
  border-bottom: 1px solid #e0e0e0;
  min-height: 0;
  overflow: hidden;
  position: relative;

}
.month-calendar__day:nth-child(7n) { border-right: 0; }
.month-calendar--four-week .month-calendar__day:nth-child(n+22) { border-bottom: 0; }
.month-calendar--five-week .month-calendar__day:nth-child(n+29) { border-bottom: 0; }
.month-calendar--six-week  .month-calendar__day:nth-child(n+36) { border-bottom: 0; }

/* Other month */
.month-calendar__day--other-month .month-calendar__day-label-inner { color: #b0b8c1; }
.month-calendar__day--other-month .event { opacity: 0.45; }

/* Day number */
.month-calendar__day-label {
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0.3rem 0.4rem 0.1rem;
  text-align: left;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  width: 100%;
  height: var(--day-num-h);
  z-index: 4;
  position: relative;
}
.month-calendar__day-label-inner {
  font-size: 0.8rem;
  font-weight: 400;
  color: #3c4043;
  width: 1.6rem;
  height: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.1s;
}
.month-calendar__day-label:hover .month-calendar__day-label-inner { background: #f1f3f4; }
.month-calendar__day--highlight .month-calendar__day-label-inner {
  background-color: #1a73e8 !important;
  color: white !important;
  font-weight: 600;
}

/* Event list — fixed-height slots */
.month-calendar__event-list-wrapper {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.event-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 0 2px;
}

/* Each slot has a fixed height matching the bars */
.mc-slot {
  height: var(--slot-h);
  flex-shrink: 0;
  overflow: hidden;
}

/* Single-day events inside slots fill the slot */
.mc-slot .event {
  height: 100%;
  margin: 0;
}

/* ── Multi-day overlay ── */
.mc-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  pointer-events: none;
  overflow: hidden;
  z-index: 3;
}

.mc-bar {
  align-self: start;
  /* top = day-number height + slot index * slot height + gap */
  margin-top: calc(var(--day-num-h) + var(--bar-slot, 0) * (var(--slot-h) + 1px));
  margin-left: 3px;
  margin-right: 3px;
  height: var(--slot-h);
  border-radius: 3px;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: var(--slot-h);
  padding: 0 5px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  pointer-events: auto;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.mc-bar:hover { filter: brightness(0.88); }
.mc-bar__title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}
.mc-bar__icons {
  flex-shrink: 0;
  margin-left: auto;
  display: flex;
  align-items: center;
  opacity: 0.9;
}

/* +N overflow button */
.mc-more {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1.5rem;
  background: linear-gradient(to bottom, transparent, rgba(241,243,244,0.95) 35%);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
}
.mc-more__label {
  font-size: 0.78rem;
  font-weight: 600;
  color: #5f6368;
}
.mc-more__tip {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(32,33,36,0.85);
  color: white;
  font-size: 0.7rem;
  white-space: nowrap;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s;
  z-index: 20;
}
.mc-more:hover .mc-more__tip { opacity: 1; }
.mc-more:hover .mc-more__label { color: #3c4043; }

/* ── Day events modal ── */
.day-modal {
  border: none;
  border-radius: 10px;
  padding: 0;
  width: min(280px, 92vw);
  max-height: 70vh;
  box-shadow: 0 6px 24px rgba(0,0,0,0.18);
  background: white;
  z-index: 9999;
  overflow: hidden;
  margin: auto;
}
.day-modal::backdrop { background: rgba(0,0,0,0.25); }
.day-modal__inner {
  display: flex;
  flex-direction: column;
  max-height: 70vh;
}
.day-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.75rem 0.5rem;
  border-bottom: 1px solid #e0e0e0;
  flex-shrink: 0;
}
.day-modal__title {
  font-size: 0.82rem;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0;
}
.day-modal__close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.9rem;
  color: #70757a;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s;
  flex-shrink: 0;
}
.day-modal__close:hover { background: #f1f3f4; color: #3c4043; }
.day-modal__list {
  list-style: none;
  padding: 0.35rem 0.4rem 0.4rem;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
}
.day-modal__item {
  display: flex;
  align-items: center;
  height: var(--slot-h);
  padding: 0 0.5rem;
  border-radius: 3px;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  overflow: hidden;
  transition: filter 0.1s;
}
.day-modal__item:hover { filter: brightness(0.88); }
.day-modal__item-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Floating expand panel ── */
.mc-float-panel {
  position: absolute;
  background: white;
  /* No top border — cell bottom acts as the top edge */
  border: 1px solid #e0e0e0;
  border-top: none;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 6px 14px rgba(0,0,0,0.15);
  z-index: 100;
  overflow: hidden;
  animation: mcFloatIn 0.15s ease both;
}

@keyframes mcFloatIn {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: translateY(0); }
}

.mc-float-list {
  list-style: none;
  padding: 1px 3px 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.mc-float-item {
  display: flex;
  align-items: center;
  height: var(--slot-h);
  padding: 0 5px;
  border-radius: 3px;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  transition: filter 0.1s;
}
.mc-float-item:hover { filter: brightness(0.88); }

.mc-float-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mc-float-chevron {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 1.3rem;
  background: white;
  border: none;
  border-top: 1px solid #e8eaed;
  margin-top: 2px;
  cursor: pointer;
  color: #9ca3af;
  transition: background 0.1s, color 0.1s;
}
.mc-float-chevron:hover { background: #f8f9fa; color: #3c4043; }


/* ── Calendar skeleton bars ── */
@keyframes mcSkeletonPulse {
  0%, 100% { opacity: 0.7; }
  50%       { opacity: 0.25; }
}
.mc-skeleton-bar {
  height: 18px;
  background: #e5e7eb;
  border-radius: 4px;
  margin-bottom: 2px;
  animation: mcSkeletonPulse 1.4s ease-in-out infinite;
  pointer-events: none;
  width: 90%;
}