/* =========================================================
   Calendario de eventos (FullCalendar) y detalle de evento
   Usa los tokens de styles.css: negro / blanco cálido / bronce.
   ========================================================= */

.calendario-seccion { padding-block: 3rem 5rem; }

.leyenda { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-bottom: 1.25rem; font-size: 0.85rem; color: var(--color-text-soft); }
.leyenda li { display: inline-flex; align-items: center; gap: 0.5rem; }
.leyenda__punto { width: 0.8rem; height: 0.8rem; border-radius: 50%; background: var(--color-black); }
.leyenda__punto--regular { background: var(--color-bronze); }

.calendario-aviso { margin-top: 1rem; padding: 0.9rem 1.1rem; background: rgba(155, 58, 46, 0.08); color: #9B3A2E; font-weight: 500; }

/* --- FullCalendar con la identidad del sitio --- */
#calendario {
  --fc-border-color: var(--color-accent-line);
  --fc-page-bg-color: var(--color-white);
  --fc-neutral-bg-color: #F0EEE9;
  --fc-today-bg-color: rgba(138, 107, 63, 0.12);
  --fc-button-bg-color: var(--color-black);
  --fc-button-border-color: var(--color-black);
  --fc-button-hover-bg-color: var(--color-bronze);
  --fc-button-hover-border-color: var(--color-bronze);
  --fc-button-active-bg-color: var(--color-bronze-strong);
  --fc-button-active-border-color: var(--color-bronze-strong);
  --fc-event-bg-color: var(--color-black);
  --fc-event-border-color: var(--color-black);
  --fc-event-text-color: var(--color-white);
  --fc-list-event-hover-bg-color: #FAF9F6;
  font-family: var(--font-body);
}
#calendario .fc-toolbar-title { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.01em; }
#calendario .fc-toolbar-title::first-letter { text-transform: uppercase; }
#calendario .fc-button { font-weight: 700; font-size: 0.78rem; letter-spacing: 0.02em; text-transform: uppercase; border-radius: var(--border-radius); box-shadow: none !important; }
#calendario .fc-col-header-cell-cushion { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding-block: 0.6rem; color: var(--color-text); }
#calendario .fc-daygrid-day-number { font-weight: 600; padding: 0.4rem 0.55rem; color: var(--color-text); }
#calendario .fc-day-today .fc-daygrid-day-number { color: var(--color-bronze-strong); font-weight: 800; }
#calendario .fc-daygrid-event { border-radius: 2px; padding: 0.1rem 0.3rem; font-size: 0.78rem; cursor: pointer; }
#calendario .fc-event { cursor: pointer; }
#calendario .fc-h-event.evento-regular { background: var(--color-bronze); border-color: var(--color-bronze); } /* solo en la cuadrícula; en la lista solo cambia el punto */
#calendario .fc-event:focus-visible { outline: 2px solid var(--color-bronze); outline-offset: 2px; }
#calendario .fc-daygrid-more-link { font-weight: 700; color: var(--color-bronze-strong); }

/* Vista de lista (móvil) */
#calendario .fc-list-day-cushion { background: #F0EEE9; font-weight: 800; }
#calendario .fc-list-event-title a, #calendario .fc-list-event-title { font-weight: 600; cursor: pointer; }
#calendario .fc-list-event-dot { border-color: var(--color-black); }
#calendario .fc-list-event.evento-regular .fc-list-event-dot { border-color: var(--color-bronze); }
#calendario .fc-list-empty { padding: 3rem 1rem; color: var(--color-text-soft); }

@media (max-width: 699px) {
  #calendario .fc-toolbar { flex-direction: column; gap: 0.75rem; }
  #calendario .fc-toolbar-title { font-size: 1.25rem; }
}

/* --- Detalle del evento --- */
.evento-dialogo {
  /* el reinicio global del sitio quita el margin:auto con el que el navegador centra los diálogos */
  margin: auto; inset: 0;
  width: min(94vw, 34rem); max-height: 90vh; padding: 0; border: none; border-radius: var(--border-radius-lg);
  background: var(--color-white); color: var(--color-text); box-shadow: 0 30px 80px -20px rgba(10, 10, 10, 0.5);
}
.evento-dialogo::backdrop { background: rgba(10, 10, 10, 0.6); backdrop-filter: blur(3px); }
.evento-dialogo__cuerpo { position: relative; padding: 2rem 1.75rem 1.75rem; display: grid; gap: 0.75rem; }
.evento-dialogo__cerrar {
  position: absolute; top: 0.75rem; right: 0.9rem; width: 2.5rem; height: 2.5rem;
  background: none; border: none; font-size: 1.9rem; line-height: 1; color: var(--color-text-soft); border-radius: 50%;
}
.evento-dialogo__cerrar:hover, .evento-dialogo__cerrar:focus-visible { color: var(--color-black); background: #F0EEE9; }
.evento-dialogo__etiqueta { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-bronze); }
.evento-dialogo h2 { font-size: 1.6rem; padding-right: 2.5rem; text-transform: none; }
.evento-dialogo__cuando { font-weight: 700; }
.evento-dialogo__repite { font-size: 0.88rem; color: var(--color-bronze-strong); font-weight: 600; }
.evento-dialogo__corta { font-size: 1.05rem; color: var(--color-text-soft); }
.evento-dialogo__detalles { white-space: pre-wrap; overflow-wrap: anywhere; padding-top: 0.75rem; border-top: 1px solid var(--color-accent-line); line-height: 1.7; }
.evento-dialogo__datos { display: grid; grid-template-columns: max-content 1fr; gap: 0.5rem 1rem; padding-top: 0.75rem; border-top: 1px solid var(--color-accent-line); font-size: 0.92rem; }
.evento-dialogo__datos dt { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-soft); padding-top: 0.2rem; }
.evento-dialogo__datos dd { margin: 0; overflow-wrap: anywhere; }
.evento-dialogo__datos a { color: var(--color-bronze-strong); text-decoration: underline; font-weight: 600; }
.evento-dialogo__acciones { display: flex; flex-wrap: wrap; gap: 0.6rem; padding-top: 0.5rem; }
.evento-dialogo__acciones .btn { padding: 0.75rem 1.2rem; white-space: normal; text-align: center; }
@media (max-width: 480px) { .evento-dialogo__acciones .btn { flex: 1 1 100%; } }