/* eventos.css — estilos específicos para la página de calendario / eventos.
   - Complementa estilos.css (variables: --gold, --muted, etc).
   - Guardar en: /css/eventos.css
*/

/* ---- Layout principal ---- */
.calendar-section .card {
  padding: 12px;
}

/* Header del calendario (mes + controles) */
.calendar-header {
  display:flex;
  align-items:center;
  gap:12px;
  justify-content:space-between;
  margin-bottom:12px;
}
.calendar-header .current-month {
  font-weight:800;
  font-family:'Merriweather', serif;
  font-size:1.05rem;
}
.calendar-actions { display:flex; align-items:center; gap:8px; }

/* Grid del calendario */
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap:8px;
  align-items: start;
}

/* Celdas (encabezado y días) */
.calendar-cell {
  background: transparent;
  border-radius:8px;
  padding:8px;
  min-height:52px;
  box-sizing:border-box;
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
}
.calendar-cell-header {
  font-weight:700;
  color:var(--muted);
  background: transparent;
  justify-content:center;
  align-items:center;
}
.calendar-cell.empty {
  background: transparent;
}

/* Día (botón) */
.calendar-cell.day {
  background: #fff;
  border-radius:8px;
  border: 1px solid rgba(11,11,11,0.04);
  cursor: pointer;
  position:relative;
  padding:8px;
  transition: transform .12s ease, box-shadow .12s ease;
}
.calendar-cell.day:hover { transform: translateY(-4px); box-shadow: 0 10px 26px rgba(11,11,11,0.06); }
.calendar-cell .day-number { font-weight:700; display:block; font-size:0.95rem; }

/* Dot markers que indican presencia de eventos */
.day-markers {
  display:flex;
  gap:4px;
  position:absolute;
  bottom:8px;
  left:8px;
}
.day-markers .dot {
  width:8px;
  height:8px;
  border-radius:50%;
  background: var(--gold);
  box-shadow: 0 4px 10px rgba(212,175,55,0.18);
}

/* Estilo cuando el día tiene eventos */
.calendar-cell.day.has-events { border-color: rgba(212,175,55,0.14); }

/* LISTA DE EVENTOS (panel derecho) */
.events-list {
  margin-top:16px;
  padding:12px;
}
.events-items { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }

.event-card { display:flex; gap:12px; align-items:flex-start; }
.event-thumb { width:120px; height:80px; object-fit:cover; border-radius:8px; flex-shrink:0; }
.event-body { flex:1; }
.event-title { margin:0 0 6px 0; font-size:1.02rem; }
.event-title a { color: var(--black); text-decoration:none; font-weight:800; }
.event-title a:hover { color: var(--gold); }
.meta { font-size:0.9rem; color:var(--muted); margin-bottom:8px; }
.excerpt { margin:0 0 10px 0; color:var(--muted); }
.event-actions { display:flex; gap:8px; }

/* Sidebar */
.sidebar-col { display:block; }
.sidebar-widget .widget-title { margin:0 0 8px 0; font-weight:900; font-family:'Merriweather', serif; }

/* Responsividad */
@media (min-width:720px) {
  /* Pantallas de escritorio: calendario a la izquierda, lista a la derecha (dentro de content-col) */
  .calendar-wrap { display:block; }
  .calendar-grid { min-height:220px; }
  .main-grid { grid-template-columns: 1fr 340px; gap:1.4rem; }
  .events-list { margin-top: 12px; }
}

@media (max-width:719px) {
  /* En móvil apilamos: calendario, luego lista, luego sidebar después */
  .calendar-grid { grid-template-columns: repeat(7, 1fr); font-size:0.95rem; }
  .event-thumb { width:90px; height:60px; }
  .hero-left { max-width: 100%; }
}

/* Accesibilidad y focus */
.calendar-cell.day:focus { outline: 3px solid rgba(212,175,55,0.12); outline-offset:3px; border-radius:8px; }
.btn:focus, a:focus { outline: 3px solid rgba(212,175,55,0.12); outline-offset:3px; }

/* Pequeñas mejoras visuales para consistencia */
.card { transition: transform .18s ease, box-shadow .18s ease; }
.card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(11,11,11,0.08); }