/* ==========================================================
   20 ANIVERSARIO BIBLIOTECA VASCONCELOS
========================================================== */

:root {

    --aniv-negro: #080808;

    --aniv-rojo: #E5232D;

    --aniv-verde: #00A651;

    --aniv-amarillo: #F5D328;

    --aniv-azul: #008ECF;

    --aniv-blanco: #FFFFFF;

    --aniv-gris: #F4F4F4;

    --aniv-texto: #333333;

}


/* ==========================================================
   CONTENEDOR
========================================================== */

.aniversario-bv {

    margin-bottom: 60px;

}


/* ==========================================================
   BANNER
========================================================== */

.aniversario-banner {

    width: 100%;

    overflow: hidden;

    background: #000;

    border-radius: 12px 12px 0 0;

}


.aniversario-banner img {

    display: block;

    width: 100%;

    height: auto;

}


/* ==========================================================
   FRANJA
========================================================== */

.aniversario-franja {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    justify-content: center;

    gap: 10px;

    padding: 13px 20px;

    color: #fff;

    font-size: 12px;

    font-weight: 600;

    letter-spacing: 1px;

    background: var(--aniv-negro);

}


.aniversario-punto {

    display: inline-block;

    width: 9px;

    height: 9px;

    border-radius: 2px;

}


.aniversario-punto.rojo {

    background: var(--aniv-rojo);

}


.aniversario-punto.verde {

    background: var(--aniv-verde);

}


.aniversario-punto.amarillo {

    background: var(--aniv-amarillo);

}


.aniversario-punto.azul {

    background: var(--aniv-azul);

}


/* ==========================================================
   PRESENTACIÓN
========================================================== */

.aniversario-presentacion {

    padding: 35px 25px 25px;

    text-align: center;

}


.aniversario-presentacion h1 {

    margin: 0 0 10px;

    color: #111;

    font-size: 34px;

    font-weight: 600;

}


.aniversario-presentacion p {

    margin-bottom: 15px;

    color: #555;

    font-size: 17px;

}


.aniversario-fecha {

    display: inline-block;

    padding: 8px 18px;

    color: #111;

    font-size: 14px;

    font-weight: 600;

    background: var(--aniv-amarillo);

    border-radius: 25px;

}


/* ==========================================================
   FILTROS
========================================================== */

.aniversario-filtros {

    margin: 10px 0 30px;

    padding: 25px;

    background: #f6f6f6;

    border-radius: 10px;

}


.aniversario-filtros-titulo {

    margin: 0 0 12px;

    color: #222;

    font-size: 14px;

    font-weight: 600;

}


.agenda-categorias {

    display: flex;

    flex-wrap: wrap;

    gap: 7px;

}


.agenda-categoria-filtro {

    padding: 7px 14px;

    color: #fff;

    font-size: 12px;

    font-weight: 600;

    border: 0;

    border-radius: 25px;

    cursor: pointer;

    transition: all .2s ease;

}


.agenda-categoria-filtro:hover {

    opacity: .82;

    transform: translateY(-1px);

}


.agenda-categoria-filtro.activo {

    box-shadow:
        0 0 0 3px
        rgba(0,0,0,.14);

    transform: translateY(-2px);

}


/* ==========================================================
   COLORES POR CATEGORÍA
========================================================== */

.cat-todo {
    background: #111;
}

.cat-infantil {
    color: #111;
    background: var(--aniv-amarillo);
}

.cat-dialogos {
    background: var(--aniv-verde);
}

.cat-artes {
    background: var(--aniv-rojo);
}

.cat-literatura {
    background: #7A3A8A;
}

.cat-editorial {
    background: var(--aniv-azul);
}

.cat-musica {
    background: #D94B22;
}

.cat-magistral {
    background: #345995;
}

.cat-taller {
    color: #111;
    background: #F4B942;
}

.cat-editorial-idiomas {
    background: #6A4C93;
}

.cat-pasacalles {
    background: #008B8B;
}

.cat-conferencia {
    background: #2878A0;
}

.cat-lsm {
    background: #333333;
}

.cat-teatro {
    background: var(--aniv-rojo);
}

.cat-visita {
    background: #52734D;
}

/* ==========================================================
   CONTADOR
========================================================== */

.agenda-contador {

    margin: 10px 0 25px;

    color: #666;

}


/* ==========================================================
   TARJETAS
========================================================== */

.agenda-lista {

    display: flex;

    flex-wrap: wrap;

}


.agenda-card-col {

    display: flex;

    margin-bottom: 25px;

}


.agenda-card {

    display: flex;

    flex-direction: column;

    width: 100%;

    overflow: hidden;

    background: #fff;

    border: 1px solid #ddd;

    border-bottom: 7px solid #111;

    border-radius: 12px;

    box-shadow:
        0 3px 10px
        rgba(0,0,0,.08);

    transition: .2s;

}


.agenda-card:hover {

    transform: translateY(-4px);

    box-shadow:
        0 8px 20px
        rgba(0,0,0,.14);

}


/* ==========================================================
   IMAGEN TARJETA
========================================================== */

.agenda-imagen {

    height: 205px;

    overflow: hidden;

    background: #111;

}


.agenda-imagen img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}


.agenda-imagen-default {

    display: flex;

    align-items: center;

    justify-content: center;

    height: 100%;

    padding: 20px;

    color: #fff;

    font-size: 22px;

    font-weight: 600;

    text-align: center;

    background:
        linear-gradient(
            135deg,
            #080808,
            #222
        );

}


/* ==========================================================
   CONTENIDO TARJETA
========================================================== */

.agenda-card-body {

    display: flex;

    flex: 1;

    flex-direction: column;

    padding: 20px;

}


.agenda-categoria {

    display: inline-block;

    align-self: flex-start;

    margin-bottom: 12px;

    padding: 5px 10px;

    color: #111;

    font-size: 11px;

    font-weight: 600;

    background: #eee;

    border-radius: 20px;

}


.agenda-card h3 {

    margin: 0 0 12px;

    color: #111;

    font-size: 20px;

    line-height: 1.3;

    font-weight: 600;

}


.agenda-tipo-publico {

    margin: 0 0 12px;

    padding: 8px 10px;

    color: #555;

    font-size: 13px;

    line-height: 1.4;

    background: #f5f5f5;

    border-left: 4px solid var(--aniv-azul);

}


.agenda-resumen {

    min-height: 67px;

    color: #666;

    line-height: 1.55;

}


.agenda-datos {

    margin-top: auto;

    padding-top: 12px;

    color: #555;

    font-size: 13px;

    border-top: 1px solid #eee;

}


.agenda-datos p {

    margin: 7px 0;

}


.agenda-datos i,
.agenda-modal-datos i {

    width: 18px;

    color: var(--aniv-rojo);

}


.agenda-ver {

    margin-top: 16px;

    color: #fff;

    background: #111;

    border: 0;

}


.agenda-ver:hover {

    color: #111;

    background: var(--aniv-amarillo);

}


/* ==========================================================
   VACÍO
========================================================== */

.agenda-vacio {

    padding: 60px 20px;

    text-align: center;

}


.agenda-vacio i {

    color: var(--aniv-rojo);

    font-size: 50px;

}


.agenda-vacio h3 {

    color: #111;

}


.aniversario-btn {

    color: #fff;

    background: #111;

    border: 0;

}


/* ==========================================================
   MODAL
========================================================== */

.agenda-modal {

    position: fixed;

    inset: 0;

    z-index: 99999;

    display: none;

    align-items: center;

    justify-content: center;

    padding: 20px;

}


.agenda-modal.activo {

    display: flex;

}


.agenda-modal-fondo {

    position: absolute;

    inset: 0;

    background:
        rgba(0,0,0,.78);

}


.agenda-modal-contenido {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        42% 58%;

    width: 100%;

    max-width: 1100px;

    max-height: 92vh;

    overflow: auto;

    background: #fff;

    border-top: 7px solid
        var(--aniv-amarillo);

}


.agenda-modal-cerrar {

    position: absolute;

    z-index: 5;

    top: 12px;

    right: 12px;

    width: 42px;

    height: 42px;

    color: #111;

    font-size: 30px;

    background: #fff;

    border: 0;

    border-radius: 50%;

}


/* imagen completa en modal */

.agenda-modal-imagen {

    display: flex;

    align-items: center;

    justify-content: center;

    min-height: 500px;

    padding: 20px;

    background: #111;

}


.agenda-modal-imagen img {

    display: block;

    width: auto;

    height: auto;

    max-width: 100%;

    max-height: 82vh;

    margin: auto;

    object-fit: contain;

}


.agenda-modal-info {

    padding: 50px 40px;

}


.agenda-modal-info h2 {

    margin-top: 0;

    color: #111;

}


.agenda-modal-datos {

    margin: 20px 0;

    padding: 18px;

    background: #f5f5f5;

}


.agenda-modal-datos p {

    margin: 8px 0;

}


/* ==========================================================
   PAGINACIÓN
========================================================== */

.agenda-paginacion {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 8px;

    margin: 15px 0 10px;

}


.agenda-paginacion[hidden] {

    display: none;

}


.agenda-pagina {

    min-width: 40px;

    height: 40px;

    padding: 0 12px;

    color: #111;

    font-weight: 600;

    background: #fff;

    border: 1px solid #111;

    border-radius: 20px;

}


.agenda-pagina.activo,
.agenda-pagina:hover {

    color: #111;

    background:
        var(--aniv-amarillo);

}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 767px) {

    .aniversario-presentacion h1 {

        font-size: 28px;

    }


    .aniversario-franja {

        font-size: 10px;

    }


    .agenda-modal-contenido {

        display: block;

    }


    .agenda-modal-imagen {

        min-height: 250px;

    }


    .agenda-modal-info {

        padding: 35px 22px;

    }

}