/* =========================================================
   Spacio — Agenda (Calendario mensual)
   Ámbito: SOLO dentro de main.agenda-page
   ========================================================= */
main.agenda-page {
    --spc-clr-border: #e6e6e6;
    --spc-clr-muted: #f8f8f8;
    --spc-clr-text: #3a3a3a;
    --spc-clr-subtle: #666;
    --spc-radius: 12px;

    /* Paleta de tipos (ajusta a tu branding) */
    --tipo-expo: #ffb600;
    /* morado */
    --tipo-taller: #643f99;
    /* verde */
    --tipo-visita: #ff6700;
    /* celeste */
    --tipo-feria: #00bdff;
    /* amarillo */
    --tipo-conversatorio: #00ff36;
    /* rojo */

    --today-outline: #643f98;
    --today-bg: #fdd97e;
    font-family: 'Montserrat', sans-serif;
}

/* ---------- Título de página opcional ---------- */
main.agenda-page .agenda-titulo {
    margin: 0 0 .75rem 0;
}

/* Toolbar: controles + leyenda en una línea */
main.agenda-page .cal-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: .5rem 0 1rem;
    flex-wrap: wrap;
    /* si no cabe, baja a 2 líneas */
}

/* =========================================================
   Controles de mes
   ========================================================= */
main.agenda-page .cal-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin: .5rem 0 1rem;
}

main.agenda-page .cal-title {
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--spc-clr-text);
}

main.agenda-page .cal-nav {
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    border: none;
    text-decoration: none;
    font-size: 1.55rem;
    line-height: 1;
    color: var(--spc-clr-text);
    background: transparent;
    transition: transform .08s ease, background .2s ease;
}

main.agenda-page .cal-nav:hover {
    background: var(--spc-clr-muted);
}

main.agenda-page .cal-nav:active {
    transform: scale(.96);
}

/* =========================================================
   Leyenda
   ========================================================= */
main.agenda-page .cal-legend {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 0 0 1rem;
    font-size: .95rem;
    color: var(--spc-clr-subtle);
}

main.agenda-page .cal-legend .dot {
    display: inline-block;
    width: .8rem;
    height: .8rem;
    border-radius: 50%;
    margin-right: .35rem;
    vertical-align: middle;
    background: var(--spc-clr-border);
}

/* Colores de la leyenda por tipo */
main.agenda-page .cal-legend .tipo-expo {
    background: var(--tipo-expo);
}

main.agenda-page .cal-legend .tipo-taller {
    background: var(--tipo-taller);
}

main.agenda-page .cal-legend .tipo-visita {
    background: var(--tipo-visita);
}

main.agenda-page .cal-legend .tipo-feria {
    background: var(--tipo-feria);
}

main.agenda-page .cal-legend .tipo-conversatorio {
    background: var(--tipo-conversatorio);
}

/* =========================================================
   Calendario
   ========================================================= */
main.agenda-page .calendar {
    border: 1px solid var(--spc-clr-border);
    border-radius: var(--spc-radius);
    overflow: hidden;
    background: #fff;
}

main.agenda-page .cal-head,
main.agenda-page .cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

main.agenda-page .cal-head {
    background: #fafafa;
    border-bottom: 1px solid var(--spc-clr-border);
}

main.agenda-page .cal-head>div {
    padding: .6rem;
    text-align: center;
    font-weight: 600;
    font-size: .9rem;
    color: var(--spc-clr-subtle);
}

main.agenda-page .cal-grid {
    min-height: 320px;
}

main.agenda-page .cal-cell {
    border-right: 1px solid var(--spc-clr-border);
    border-bottom: 1px solid var(--spc-clr-border);
    min-height: 50px;
    padding: .55rem .55rem 2.25rem;
    /* espacio abajo para los dots */
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    background: #fff;
}

main.agenda-page .cal-cell:nth-child(7n) {
    border-right: none;
}

main.agenda-page .cal-cell.is-empty {
    background: #fcfcfc;
}

/* Día (número) */
main.agenda-page .cal-date {
    font-weight: 600;
    font-size: .95rem;
    color: var(--spc-clr-text);
}

main.agenda-page .cal-date[aria-current="date"] {
    font-weight: 800;
}

/* Hoy */
main.agenda-page .cal-cell.is-today {
    outline: 2px solid var(--today-outline);
    outline-offset: -2px;
    background: var(--today-bg);
}

/* =========================================================
   Dots por día (múltiples eventos)
   ========================================================= */
/* Contenedor de puntos (posicionado al fondo-derecha) */
main.agenda-page .cal-dots {
    position: absolute;
    right: .5rem;
    bottom: .5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-width: calc(100% - 1rem);
    align-items: center;
    justify-content: flex-end;
}

/* Base de DOT (tamaño grande por si lo necesitas) */
main.agenda-page .cal-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .06);
    transition: filter .15s ease, transform .05s ease;
}

/* Tamaño pequeño para múltiples eventos */
main.agenda-page .cal-dot.dot-sm {
    width: 14px;
    height: 14px;
}

/* ⚠️ Reset de reglas viejas que solapaban puntos (absolute) */
main.agenda-page .cal-dots .cal-dot {
    position: static !important;
    right: auto !important;
    bottom: auto !important;
}

/* Hover/Focus accesible */
main.agenda-page .cal-dot:hover {
    filter: brightness(1.05);
}

main.agenda-page .cal-dot:active {
    transform: scale(.96);
}

main.agenda-page .cal-dot:focus-visible {
    outline: 2px solid #111827;
    outline-offset: 2px;
}

/* Día sin evento: puntito gris opcional */
main.agenda-page .cal-dot.is-off {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #eaeaea;
    position: absolute;
    right: .75rem;
    bottom: .75rem;
}

/* Colores por tipo (mismo naming que en PHP) */
main.agenda-page .tipo-expo {
    background: var(--tipo-expo);
}

main.agenda-page .tipo-taller {
    background: var(--tipo-taller);
}

main.agenda-page .tipo-visita {
    background: var(--tipo-visita);
}

main.agenda-page .tipo-feria {
    background: var(--tipo-feria);
}

main.agenda-page .tipo-concierto {
    background: var(--tipo-concierto);
}

.agenda-titulo {
    text-align: center;

    margin: 1rem 0 2rem;
    padding-top: 50px;
    padding-bottom: 10px;
}


/* Contenedor del día con lista vertical de eventos */
.cal-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    /* separa eventos del mismo día */
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
}

/* Cada renglón: círculo + texto */
.cal-item {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    /* para posicionar el tooltip del círculo */
}

/* Círculo (ya tienes tamaños, esto es por si acaso) */
.cal-dot.dot-sm {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex: 0 0 auto;
    border: 0;
    cursor: pointer;
}

/* Texto al lado del círculo: boton “link-like” */
.cal-label {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    text-align: left;
    cursor: pointer;
    line-height: 1.2;
    color: inherit;
    max-width: 100%;
    white-space: normal;
    /* deja que el nombre del evento haga wrap */
}

/* Hover opcional para indicar que es clickeable */
.cal-label:hover {
    text-decoration: underline;
}

/* -------- Tooltip custom del círculo -------- */
/* El title nativo ya funciona; esto es un plus visual */
.cal-dot[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 22px;
    /* a la derecha del círculo */
    top: 50%;
    transform: translateY(-50%);
    display: none;
    background: #111;
    color: #fff;
    font-size: 12px;
    line-height: 1.3;
    padding: 6px 8px;
    border-radius: 6px;
    white-space: normal;
    width: max(180px, 22ch);
    /* ancho mínimo cómodo */
    z-index: 10;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}

.cal-dot[data-tooltip]:hover::after,
.cal-dot[data-tooltip]:focus::after {
    display: block;
}

/* Evita que el tooltip se recorte si la celda usa overflow hidden */
.cal-cell {
    overflow: visible;
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1024px) {
    main.agenda-page .cal-grid {
        min-height: 280px;
    }

    main.agenda-page .cal-cell {
        min-height: 86px;
    }
}

@media (max-width: 768px) {
    main.agenda-page .cal-grid {
        min-height: auto;
    }

    main.agenda-page .cal-cell {
        min-height: 72px;
        padding-bottom: 2rem;
    }

    main.agenda-page .cal-dots {
        gap: 4px;
    }

    main.agenda-page .cal-title {
        font-size: 1.1rem;
    }
}

@media (max-width: 480px) {
    main.agenda-page .cal-head>div {
        padding: .5rem .25rem;
        font-size: .85rem;
    }

    main.agenda-page .cal-cell {
        padding: .45rem .45rem 1.8rem;
    }
}


/* ===== Agenda: modal más pequeño y centrado ===== */
main.agenda-page .modal{ position:fixed; inset:0; display:none; }
main.agenda-page .modal.is-open{ display:block; z-index:10000; }
main.agenda-page .modal-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.55); }

/* Diálogo centrado y con tamaño contenido */
main.agenda-page .modal-dialog{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  bottom: auto;                       /* anula reglas previas */
  width: min(760px, 92vw);            /* <= más angosto */
  max-height: min(80dvh, 760px);      /* <= más bajo */
  background:#fff;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Cabecera fija y cuerpo con scroll si hace falta */
main.agenda-page .modal-body{ display:flex; flex-direction:column; min-height:0; padding:0 0 14px; }
main.agenda-page .modal-header{
  position: sticky; top:0; z-index:1;
  background:#fff; padding:14px 18px; margin:0 0 8px 0;
}
main.agenda-page .modal-header .titulos{ margin:0; font-size:1.35rem; }

/* Grid interna más compacta */
main.agenda-page .modal-grid{
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap:14px;
  padding:0 16px 14px;
  min-height:0;
}

/* Imagen contenida (no se desborda) */
main.agenda-page .modal-img{
  max-height: 48vh;
  border-radius: 10px;
  overflow: hidden;
  background:#f1f2f2;
  display:flex; align-items:center; justify-content:center;
}
main.agenda-page .modal-img img{
  max-width:100%; max-height:100%;
  width:auto; height:auto;
  object-fit: contain;               /* usa cover si prefieres recortar */
  display:block;
}

/* Contenido con scroll propio */
main.agenda-page .modal-info{
  min-height:0; overflow:auto; padding-right:6px;
  -webkit-overflow-scrolling: touch;
}

/* Botón cerrar bien dentro del cuadro */
main.agenda-page .modal-close{
  position:absolute; right:12px; top:12px;
  width:36px; height:36px; border:0; background:transparent;
  font-size:28px; line-height:1; color:#ffb600; cursor:pointer;
}

/* Móvil: aún más compacto y 1 columna */
@media (max-width:760px){
  main.agenda-page .modal-dialog{ width:92vw; max-height:86dvh; }
  main.agenda-page .modal-grid{ grid-template-columns:1fr; }
  main.agenda-page .modal-img{ max-height:38vh; }
}