/* Calendario Elegante Responsive v2.6 */
.cer-wrap{ --bd:#e2e8f0; --ink:#0f172a; --sub:#475569; --dot:#2563eb; --bg:#f8fafc; font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; color:var(--ink); }
.cer-header{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:6px 2px; margin-bottom:6px; }
.cer-title{ font-weight:800; font-size:clamp(18px,3.6vw,24px); text-transform:capitalize; }
.cer-btn{ display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border:1px solid var(--bd); border-radius:10px; text-decoration:none; color:inherit; background:#fff; }
.cer-weekdays{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:10px; font:700 clamp(11px,2.8vw,13px)/1 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; color:var(--sub); padding:8px 0 6px; }
.cer-wd{ text-align:center; }

.cer-grid{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:10px; }
.cer-day{ background:#fff; border:1px solid var(--bd); border-radius:14px; padding:8px 8px 6px; min-height:120px; position:relative; overflow:hidden; box-shadow:0 6px 22px rgba(15,23,42,.04); }
.cer-day.is-empty{ background:transparent; border-color:transparent; box-shadow:none; }
.cer-date{ display:flex; align-items:baseline; gap:8px; }
.cer-date .cer-weekday{ font-weight:800; font-size:12px; text-transform:uppercase; letter-spacing:.02em; color:var(--sub); }
.cer-date .cer-daynum{ font-weight:900; font-size:18px; color:#000; }
.cer-events{ margin-top:6px; max-height:110px; overflow-y:auto; padding-right:4px; scrollbar-width:thin; }
.cer-events::-webkit-scrollbar{ width:6px; height:6px; } .cer-events::-webkit-scrollbar-thumb{ background:#cbd5e1; border-radius:6px; }
.cer-event{ display:flex; align-items:center; gap:6px; font-size:13px; line-height:1.35; color:var(--sub); white-space:normal; word-break:break-word; }
.cer-event::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--dot); box-shadow:0 0 0 2px rgba(37,99,235,.15); flex-shrink:0; margin-top:0; }
.cer-event.cer-empty{ opacity:.7; font-style:italic; }
.cer-link{ color:inherit; text-decoration:underline; text-underline-offset:2px; }
.cer-title{ background:none; border:0; padding:0; margin:0; font:inherit; color:inherit; text-decoration:underline; text-underline-offset:2px; cursor:pointer; }
.cer-ext{ margin-left:4px; text-decoration:none; }

.cer-day.is-today{ box-shadow: inset 0 0 0 2px rgba(37,99,235,.25); }
.cer-day.has-events{ background:#fbfdff; border-color:#cfe0ff; }

/* Móvil: carrusel por día */
@media (max-width:768px){
  .cer-weekdays{ grid-auto-flow:column; grid-auto-columns:minmax(260px,1fr); overflow-x:auto; -webkit-overflow-scrolling:touch; mask-image:linear-gradient(90deg,transparent 0,#000 20px,#000 calc(100% - 20px),transparent 100%); }
  .cer-grid{ grid-auto-flow:column; grid-auto-columns:minmax(260px,1fr); overflow-x:auto; -webkit-overflow-scrolling:touch; scroll-snap-type:x mandatory; padding-bottom:2px; }
  .cer-day{ scroll-snap-align:start; min-width:260px; min-height:140px; padding:10px; }
  .cer-events{ max-height:128px; }
  .cer-date{ position:sticky; top:0; z-index:1; background:#fff; padding-bottom:6px; margin:-10px -10px 6px -10px; padding:10px 10px 6px 10px; border-bottom:1px solid var(--bd); justify-content:space-between; }
  .cer-date .cer-weekday{ font-size:14px; } .cer-date .cer-daynum{ font-size:20px; }
}

/* Modal */
.cer-modal{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(15,23,42,.6); z-index:999999; }
.cer-modal.is-open{ display:flex; }
.cer-dialog{ background:#fff; border-radius:12px; max-width:92vw; max-height:90vh; box-shadow:0 10px 30px rgba(0,0,0,.35); overflow:hidden; position:relative; }
.cer-dialog-body{ display:flex; flex-direction:column; gap:10px; padding:10px; }
.cer-dialog img{ display:block; max-width:100%; height:auto; max-height:90vh; border-radius:8px; }
.cer-close{ position:absolute; top:8px; right:8px; width:34px; height:34px; border:1px solid var(--bd); border-radius:999px; background:#fff; cursor:pointer; display:grid; place-items:center; font-size:18px; line-height:0; box-shadow:0 6px 16px rgba(0,0,0,.15); }
.cer-dialog-title{ font-size:16px; font-weight:800; color:#000; margin:6px 0 4px; }
.cer-dialog-time{ margin:0; font-weight:600; }
.cer-dialog-link a{ color:#2563eb; text-decoration:underline; }
@media (min-width:640px){
  .cer-dialog-body{ flex-direction:row; align-items:flex-start; gap:16px; }
  .cer-dialog img{ max-width:56vw; }
  .cer-dialog-meta{ max-width:32ch; }
}