/* =====================================================
   CALENDARIO VAISNAVA · MUNDO BHAKTI
   ===================================================== */

/* ---------- CONTROLES ---------- */

.calendar-controls{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:32px;
  margin-bottom:56px;
}

.calendar-controls h3{
  font-family:"Crimson Text", serif;
  font-size:30px;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:capitalize;
  margin:0;
}

.calendar-controls button{
  appearance:none;
  border:none;
  background:rgba(0,0,0,.06);
  width:38px;
  height:38px;
  border-radius:50%;
  font-size:20px;
  line-height:1;
  cursor:pointer;
  transition:background .2s ease, transform .2s ease;
}

.calendar-controls button:hover{
  background:rgba(0,0,0,.10);
  transform:translateY(-1px);
}

/* ---------- GRID BASE ---------- */

.calendar-shell{
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap:14px;
  font-family:"Crimson Text", serif;
}

/* ---------- CABECERA DÍAS ---------- */

.cal-head{
  text-align:center;
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  opacity:.45;
  padding-bottom:6px;
}

/* ---------- CELDA DÍA ---------- */

.cal-day{
  position:relative;
  background:rgba(255,255,255,.65);
  border:1px solid rgba(0,0,0,.06);
  border-radius:var(--radius);
  padding:16px 14px 18px;
  min-height:120px;
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    border-color .22s ease;
}

.cal-day:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 50px rgba(0,0,0,.08);
  border-color:rgba(0,0,0,.12);
}

/* ---------- NÚMERO ---------- */

.cal-num{
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  opacity:.45;
}

/* ---------- EVENTOS ---------- */

.cal-event{
  margin-top:10px;
  font-size:16px;
  line-height:1.35;
  font-weight:500;
}

/* ---------- + MÁS ---------- */

.cal-more{
  margin-top:8px;
  font-size:13px;
  opacity:.6;
  cursor:pointer;
  font-style:italic;
  position:relative;
  z-index:2;
}

.cal-more:hover{
  opacity:1;
  text-decoration:underline;
}

/* ---------- IMPORTANCIA (ACENTO INFERIOR) ---------- */

.cal-day.high,
.cal-day.very-high{
  background:rgba(255,255,255,.82);
}

.cal-day.high::after,
.cal-day.very-high::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:4px;
  background:var(--gold);
  border-radius:0 0 var(--radius) var(--radius);
  pointer-events:none; /* 🔑 CLAVE PARA EL MODAL */
}

.cal-day.very-high::after{
  height:6px;
}

/* ---------- HOY ---------- */

.cal-day.today{
  outline:none;
  box-shadow:
    0 0 0 2px rgba(201,163,93,.45),
    0 12px 32px rgba(201,163,93,.25);
}

/* ---------- HUECOS ---------- */

.cal-empty{
  min-height:120px;
}

/* =====================================================
   MODAL EVENTOS
   ===================================================== */

.calendar-modal{
  position:fixed;
  inset:0;
  display:none;
  z-index:9999;
}

.calendar-modal.open{
  display:block;
}

.modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.6);
}

.modal-box{
  position:relative;
  background:#fff;
  max-width:420px;
  margin:10vh auto;
  padding:24px 22px 26px;
  border-radius:18px;
  z-index:1;
  box-shadow:0 30px 80px rgba(0,0,0,.25);
  font-family:"Crimson Text", serif;
}

.modal-close{
  position:absolute;
  top:10px;
  right:12px;
  border:none;
  background:none;
  font-size:26px;
  line-height:1;
  cursor:pointer;
  opacity:.5;
}

.modal-close:hover{
  opacity:1;
}

.modal-title{
  margin:0 0 14px;
  font-size:20px;
  font-weight:600;
  text-transform:capitalize;
}

.modal-events{
  list-style:none;
  padding:0;
  margin:0;
}

.modal-events li{
  padding:10px 0;
  border-bottom:1px solid rgba(0,0,0,.08);
  font-size:16px;
  line-height:1.4;
}

.modal-events li:last-child{
  border-bottom:none;
}

/* =====================================================
   RESPONSIVE
   ===================================================== */

@media (max-width: 980px){
  .calendar-shell{
    gap:12px;
  }

  .cal-event{
    font-size:15px;
  }
}

@media (max-width: 640px){

  .calendar-shell{
    grid-template-columns: repeat(2, 1fr);
    gap:14px;
  }

  .cal-head{
    display:none;
  }

  .cal-day{
    min-height:100px;
    padding:14px 12px 16px;
  }

  .cal-event{
    font-size:14px;
    line-height:1.4;
  }

  .calendar-controls{
    margin-bottom:40px;
  }

  .calendar-controls h3{
    font-size:24px;
  }
}