/*
 * Estilos de la agenda pública.
 * Solo se carga en las páginas públicas de eventos (/agenda/...).
 */

.seccion-agenda {
    max-width: 75rem;
    margin: var(--espacio-5) auto;
    padding: 0 var(--espacio-3);
}

.seccion-agenda__cabecera {
    text-align: center;
    margin-bottom: var(--espacio-4);
}

.seccion-agenda__cabecera p {
    color: var(--color-texto-claro);
    font-size: 1.1rem;
}

/* ---------- Toolbar de navegación de mes ---------- */

.agenda-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espacio-2);
    margin-bottom: var(--espacio-2);
    padding: 0.75rem 0;
}

.agenda-mes-titulo {
    margin: 0;
    font-size: 1.5rem;
    text-align: center;
    color: var(--color-primario);
    text-transform: capitalize;
}

.agenda-mes-nav {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 44px;
    padding: 0.5rem 1rem;
    border: 2px solid var(--color-primario);
    border-radius: var(--radio-borde);
    color: var(--color-primario);
    text-decoration: none;
    font-weight: 600;
    background: var(--color-fondo);
}

.agenda-mes-nav:hover,
.agenda-mes-nav:focus-visible {
    background: var(--color-primario);
    color: #fff;
}

/* Las flechas se sirven ahora directamente con chevron-left / chevron-right
   (ver includes/icons.php). Antes rotábamos chevron-up/down con CSS, lo
   que era frágil y difícil de seguir. */

/* ---------- Acciones rápidas como "píldoras" con icono ---------- */

.agenda-acciones-rapidas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin: 0 0 var(--espacio-3);
}

.agenda-accion {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.9rem;
    background: var(--color-fondo);
    color: var(--color-primario);
    border: 2px solid var(--color-borde);
    border-radius: 999px;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    min-height: 36px;
}

.agenda-accion:hover,
.agenda-accion:focus-visible {
    background: var(--color-primario);
    color: #fff;
    border-color: var(--color-primario);
}

/* ---------- Calendario mensual (tabla semántica) ---------- */

.agenda-calendario {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-fondo);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-borde);
    overflow: hidden;
    margin-bottom: var(--espacio-5);
    table-layout: fixed; /* todas las columnas iguales */
}

.agenda-calendario caption {
    /* Visible solo para lectores de pantalla: el caption resume el
       contenido del calendario sin estorbar visualmente. */
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.agenda-calendario thead th {
    background: var(--color-primario);
    color: #fff;
    padding: 0.75rem 0.5rem;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
}

.agenda-celda {
    vertical-align: top;
    border: 1px solid var(--color-borde);
    padding: 0.4rem;
    min-height: 6.5rem;
    height: 6.5rem;
    position: relative;
}

.agenda-celda--vacia {
    background: var(--color-fondo-alterno);
}

.agenda-celda--hoy {
    background: #fff8e6; /* amarillo muy suave */
    box-shadow: inset 0 0 0 2px var(--color-acento);
}

.agenda-celda__numero {
    display: inline-block;
    font-weight: 700;
    color: var(--color-primario);
    font-size: 0.95rem;
    margin-bottom: 0.25rem;
}

.agenda-celda--hoy .agenda-celda__numero {
    background: var(--color-acento);
    color: var(--color-primario);
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    text-align: center;
    line-height: 1.5rem;
    font-size: 0.85rem;
}

.agenda-celda__eventos {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

/* Cada evento como una "etiqueta" coloreada por su categoría. */
.agenda-evento {
    display: flex;
    align-items: baseline;
    gap: 0.3rem;
    background: var(--color, var(--color-primario));
    color: #fff;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    font-size: 0.78rem;
    line-height: 1.25;
    text-decoration: none;
    overflow: hidden;
}

.agenda-evento:hover,
.agenda-evento:focus-visible {
    outline: 2px solid var(--color-primario);
    outline-offset: 2px;
}

.agenda-evento__hora {
    font-weight: 700;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

.agenda-evento__icono {
    display: inline-flex;
    flex-shrink: 0;
    font-size: 0.8rem;
    opacity: 0.95;
}

.agenda-evento__titulo {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* En móvil la rejilla es muy estrecha: ocultamos el texto del evento
   y dejamos solo un puntito de color con un anillo "pulsante" suave
   para que se distinga bien sobre el fondo. El detalle se ve en la
   "vista de lista" de abajo.

   El anillo se hace con box-shadow (no añade nodos) y pulsa con un
   keyframe de 2,4 segundos. Respeta prefers-reduced-motion. */
@media (max-width: 768px) {
    .agenda-celda {
        height: 4rem;
        min-height: 4rem;
        padding: 0.25rem;
    }
    .agenda-celda__numero {
        font-size: 0.85rem;
    }
    .agenda-evento {
        position: relative;
        width: 10px;
        height: 10px;
        padding: 0;
        font-size: 0;
        line-height: 0;
        border-radius: 50%;
        margin: 4px 6px 4px 2px;
        animation: agenda-evento-latido 2.4s ease-in-out infinite;
    }
    .agenda-celda__eventos {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.15rem;
    }
    .agenda-evento__hora,
    .agenda-evento__icono,
    .agenda-evento__titulo {
        display: none;
    }
}

/* Pulso del punto del evento en móvil: anillo que se expande y se
   desvanece. Hecho con box-shadow para no necesitar pseudo-elementos
   (más simple de leer y de mantener). */
@keyframes agenda-evento-latido {
    0%, 100% {
        box-shadow: 0 0 0 0 var(--color, var(--color-primario));
    }
    50% {
        box-shadow: 0 0 0 6px rgba(248, 149, 42, 0);
    }
}

/* Si la persona prefiere reducir el movimiento del sistema, quitamos
   la animación pero dejamos el punto un poco más grande para que
   siga siendo visible. */
@media (prefers-reduced-motion: reduce) {
    .agenda-evento {
        animation: none !important;
        box-shadow: 0 0 0 2px var(--color-acento);
    }
}

/* ---------- Vista de lista (alternativa accesible) ---------- */

.agenda-lista {
    margin-top: var(--espacio-4);
}

.agenda-lista h2 {
    margin: 0 0 0.4rem;
}

.lista-eventos {
    list-style: none;
    padding: 0;
    margin: var(--espacio-3) 0 0;
    display: flex;
    flex-direction: column;
    gap: var(--espacio-2);
}

/* Item de la lista: en escritorio la card se parte por la mitad —
   contenido (fecha + texto) a la izquierda, imagen a la derecha. La
   altura de la card la marca el CONTENIDO (texto), no la imagen: la
   imagen se ajusta a esa altura y se recorta por el centro
   (object-fit: cover). Así, eventos cortos = cards cortas. */
.lista-eventos__item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    background: var(--color-fondo);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-borde);
    overflow: hidden;
}

/* Bloque de contenido (mitad izquierda): a su vez una sub-rejilla
   con la fecha en formato "calendario" + el cuerpo. */
.lista-eventos__contenido {
    display: grid;
    grid-template-columns: 5rem 1fr;
    gap: var(--espacio-3);
    padding: var(--espacio-2);
    align-items: start;
}

/* La columna de imagen toma la altura completa del grid (que es la
   altura del contenido). Importante: necesitamos position relative o
   overflow:hidden y un truco para que la imagen rellene sin estirarse:
   posicionamos la imagen como object-fit cover dentro de un contenedor
   con altura 100%. */
.lista-eventos__imagen {
    display: block;
    overflow: hidden;
    background: var(--color-fondo-alterno);
    position: relative;
    /* Aspect-ratio mínimo para que en navegadores antiguos la imagen
       no se quede a 0px de altura si el contenido es muy corto. */
    min-height: 6rem;
}

.lista-eventos__imagen img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.3s ease-out;
}

/* La imagen también es un enlace al detalle. Hacemos un pequeño zoom
   al pasar por encima para reforzar visualmente que es interactiva.
   Se respeta prefers-reduced-motion. */
a.lista-eventos__imagen:hover img,
a.lista-eventos__imagen:focus-visible img {
    transform: scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
    .lista-eventos__imagen img { transition: none; }
    a.lista-eventos__imagen:hover img,
    a.lista-eventos__imagen:focus-visible img { transform: none; }
}

/* En móvil/tablet la imagen pasa ARRIBA (banner) y el contenido debajo
   ocupando toda la anchura. La imagen es más bajita para no ocupar
   demasiado scroll. */
@media (max-width: 768px) {
    .lista-eventos__item {
        grid-template-columns: 1fr;
        min-height: 0;
    }
    .lista-eventos__imagen {
        order: -1;
        height: 8rem;
    }
}

@media (max-width: 480px) {
    .lista-eventos__contenido {
        grid-template-columns: 4rem 1fr;
        gap: var(--espacio-2);
    }
}

.lista-eventos__fecha {
    text-align: center;
    background: var(--color-primario);
    color: #fff;
    border-radius: var(--radio-borde);
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.lista-eventos__dia {
    font-size: 1.75rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.lista-eventos__diasem,
.lista-eventos__anio {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.85;
}

.lista-eventos__cuerpo {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.lista-eventos__titulo {
    margin: 0;
    color: var(--color-primario);
    font-size: 1.15rem;
}

.lista-eventos__titulo a {
    color: inherit;
    text-decoration: none;
}

.lista-eventos__titulo a:hover,
.lista-eventos__titulo a:focus-visible {
    text-decoration: underline;
}

.lista-eventos__cuando,
.lista-eventos__donde {
    margin: 0;
    color: var(--color-texto-claro);
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

/* CTA explícito al final del cuerpo. Aunque el título también es un
   enlace al detalle, este "badge" señaliza la acción claramente —
   especialmente útil en móvil, donde no hay hover. Se alinea a la
   derecha con align-self para que destaque visualmente y no se
   confunda con el resto de líneas de texto. */
.lista-eventos__cta {
    margin: 0.5rem 0 0;
    align-self: flex-end;
}

.enlace-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.9rem;
    background: var(--color-primario);
    color: #fff;
    border-radius: 999px;
    font-weight: 700;
    text-decoration: none;
    font-size: 0.88rem;
    min-height: 32px;
    transition: background 0.15s, box-shadow 0.15s;
}

.enlace-cta i {
    transition: transform 0.15s;
}

.enlace-cta:hover,
.enlace-cta:focus-visible {
    background: var(--color-primario-claro);
    box-shadow: 0 3px 10px rgba(5, 65, 80, 0.25);
}

.enlace-cta:hover i,
.enlace-cta:focus-visible i {
    transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
    .enlace-cta,
    .enlace-cta i { transition: none; }
}

/* ---------- Vista individual de evento ---------- */

/* Detalle del evento: dos columnas en escritorio. El texto va a la
   izquierda y la imagen ocupa la mitad derecha COMPLETA (sin
   recortar, object-fit: contain) — pensado para que se vea bien un
   póster de campamento o cartel de evento sin perder ningún borde.
   Si la imagen es pequeña queda centrada en su mitad sin estirarse. */
.evento-articulo {
    max-width: 72rem;
    margin: var(--espacio-5) auto;
    padding: 0 var(--espacio-3);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--espacio-4);
    align-items: start;
}

.evento-articulo__principal {
    min-width: 0; /* permite que el texto se ajuste sin desbordar la rejilla */
}

.evento-articulo__imagen {
    background: var(--color-fondo-alterno);
    border-radius: var(--radio-borde);
    overflow: hidden;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.evento-articulo__imagen img {
    max-width: 100%;
    max-height: 40rem;
    width: auto;
    height: auto;
    display: block;
    border-radius: calc(var(--radio-borde) - 2px);
    object-fit: contain;
}

@media (max-width: 768px) {
    .evento-articulo {
        grid-template-columns: 1fr;
    }
    .evento-articulo__imagen {
        order: -1; /* en móvil, la imagen sube al principio */
    }
}

.evento-cabecera {
    margin-bottom: var(--espacio-3);
}

.evento-cabecera h1 {
    margin: 0.5rem 0 var(--espacio-2);
}

.evento-cuando,
.evento-donde {
    margin: 0.25rem 0;
    color: var(--color-texto);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.05rem;
}

.evento-descripcion {
    background: var(--color-fondo);
    border-left: 4px solid var(--color-acento);
    padding: var(--espacio-2) var(--espacio-3);
    margin: var(--espacio-3) 0;
    font-size: 1.05rem;
    line-height: 1.7;
}

.evento-acciones {
    display: flex;
    gap: var(--espacio-2);
    flex-wrap: wrap;
    margin-top: var(--espacio-3);
}

.evento-pie {
    margin-top: var(--espacio-4);
    padding-top: var(--espacio-3);
    border-top: 1px solid var(--color-borde);
}

.evento-pie a {
    color: var(--color-primario);
    font-weight: 600;
}

/* ---------- Bloque "Próximos eventos" en la portada ---------- */

.proximos-eventos {
    max-width: 75rem;
    margin: var(--espacio-5) auto;
    padding: 0 var(--espacio-3);
}

.proximos-eventos__cabecera {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--espacio-2);
    margin-bottom: var(--espacio-3);
}

.proximos-eventos h2 {
    margin: 0;
}

.proximos-eventos__tarjetas {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--espacio-3);
}

.proximo-tarjeta {
    background: var(--color-fondo);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-borde);
    padding: var(--espacio-3);
    text-decoration: none;
    color: var(--color-texto);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
    border-top: 4px solid var(--color, var(--color-primario));
}

.proximo-tarjeta:hover,
.proximo-tarjeta:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(5, 65, 80, 0.1);
    border-color: var(--color-primario);
    color: var(--color-texto);
}

.proximo-tarjeta__cuando {
    font-weight: 600;
    color: var(--color-primario);
    font-size: 0.95rem;
}

.proximo-tarjeta__titulo {
    margin: 0;
    color: var(--color-primario);
    font-size: 1.15rem;
}

.proximo-tarjeta__donde {
    color: var(--color-texto-claro);
    font-size: 0.9rem;
    margin: 0;
}

/* CTA al pie de la tarjeta (señal de "se puede pulsar"). Estilo
   "badge" igual que en la lista, alineado a la derecha y empujado
   al final con margin-top auto (esto funciona porque la tarjeta es
   un flex-column). */
.proximo-tarjeta__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    align-self: flex-end;
    margin-top: auto;
    padding: 0.4rem 0.9rem;
    background: var(--color-primario);
    color: #fff;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.88rem;
    min-height: 32px;
    transition: background 0.15s, box-shadow 0.15s;
}

.proximo-tarjeta__cta i {
    transition: transform 0.15s;
}

.proximo-tarjeta:hover .proximo-tarjeta__cta,
.proximo-tarjeta:focus-visible .proximo-tarjeta__cta {
    background: var(--color-primario-claro);
    box-shadow: 0 3px 10px rgba(5, 65, 80, 0.25);
}

.proximo-tarjeta:hover .proximo-tarjeta__cta i,
.proximo-tarjeta:focus-visible .proximo-tarjeta__cta i {
    transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
    .proximo-tarjeta__cta,
    .proximo-tarjeta__cta i { transition: none; }
}