.evento-listado,
.evento-ficha {
margin-top: 1.5rem;
}
.evento-vacio {
margin: 0;
padding: 1.5rem;
border: 1px dashed currentColor;
border-radius: 8px;
opacity: 0.8;
}
.evento-grilla {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 1.5rem;
}
.evento-card {
margin: 0;
background: var(--nv-site-bg, #fff);
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 8px;
overflow: hidden;
}
.evento-card__enlace {
display: flex;
flex-direction: column;
height: 100%;
color: inherit;
text-decoration: none;
}
.evento-card__enlace:hover .evento-card__titulo,
.evento-card__enlace:focus-visible .evento-card__titulo {
color: var(--nv-primary-accent, #0366d6);
}
.evento-card__media {
aspect-ratio: 4 / 3;
background: rgba(0, 0, 0, 0.04);
display: flex;
align-items: center;
justify-content: center;
}
.evento-card__img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.evento-card__sin-foto {
font-size: 0.9rem;
opacity: 0.6;
}
.evento-card__cuerpo {
padding: 1rem 1.1rem 1.15rem;
}
.evento-card__titulo {
margin: 0 0 0.35rem;
font-size: 1.15rem;
line-height: 1.3;
}
.evento-card__meta,
.evento-ficha__meta {
display: flex;
flex-wrap: wrap;
gap: 0.35rem 0.75rem;
margin: 0;
font-size: 0.9rem;
opacity: 0.75;
}
.evento-card__extracto {
margin: 0.7rem 0 0;
}
.evento-volver {
margin: 0 0 0.75rem;
}
.evento-volver a {
text-decoration: none;
}
.evento-volver a::before {
content: "← ";
}
.evento-ficha__titulo {
margin: 0 0 0.4rem;
}
.evento-ficha__texto {
margin-top: 1.25rem;
}
.evento-fotos {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 0.75rem;
margin-top: 1.5rem;
}
.evento-foto {
display: block;
padding: 0;
border: 0;
background: rgba(0, 0, 0, 0.04);
cursor: zoom-in;
aspect-ratio: 1;
overflow: hidden;
}
.evento-foto__img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.evento-foto:focus-visible {
outline: 2px solid var(--nv-primary-accent, #0366d6);
outline-offset: 2px;
}
body.evento-lightbox-abierto {
overflow: hidden;
}
body.evento-lightbox-abierto .header,
body.evento-lightbox-abierto .header-menu-sidebar,
body.evento-lightbox-abierto .hfg-ov,
body.evento-lightbox-abierto footer,
body.evento-lightbox-abierto > button {
visibility: hidden;
}
dialog.evento-lightbox[open] {
position: fixed;
inset: 0;
width: 100vw;
height: 100dvh;
max-width: none;
max-height: none;
margin: 0;
padding: 1.25rem 1rem;
border: 0;
border-radius: 0;
background: rgba(0, 0, 0, 0.94);
color: #fff;
z-index: 1000000;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
grid-template-rows: auto minmax(0, 1fr);
gap: 0.75rem 0.5rem;
align-items: center;
}
.evento-lightbox::backdrop {
background: #000;
}
.evento-lightbox__figura {
grid-column: 2;
grid-row: 2;
margin: 0;
min-width: 0;
}
.evento-lightbox img {
display: block;
width: 100%;
max-height: calc(100vh - 8rem);
object-fit: contain;
}
.evento-lightbox figcaption {
margin-top: 0.75rem;
text-align: center;
}
.evento-lightbox__cerrar,
.evento-lightbox__nav {
border: 0;
background: rgba(255, 255, 255, 0.12);
color: #fff;
cursor: pointer;
font: inherit;
padding: 0.4rem 0.75rem;
border-radius: 4px;
}
.evento-lightbox__cerrar {
grid-column: 3;
grid-row: 1;
justify-self: end;
}
.evento-lightbox__nav--anterior {
grid-column: 1;
grid-row: 2;
}
.evento-lightbox__nav--siguiente {
grid-column: 3;
grid-row: 2;
}
.evento-paginacion {
margin-top: 2rem;
}
.evento-paginacion ul {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
margin: 0;
padding: 0;
list-style: none;
}
.evento-paginacion a,
.evento-paginacion span {
display: inline-block;
padding: 0.35rem 0.7rem;
border: 1px solid rgba(0, 0, 0, 0.12);
border-radius: 4px;
text-decoration: none;
}
.evento-paginacion .current {
border-color: var(--nv-primary-accent, #0366d6);
color: var(--nv-primary-accent, #0366d6);
}
@media (max-width: 640px) {
dialog.evento-lightbox[open] {
grid-template-columns: 1fr 1fr;
width: 100vw;
padding: 0.75rem;
}
.evento-lightbox__figura {
grid-column: 1 / -1;
grid-row: 1;
}
.evento-lightbox__cerrar {
grid-column: 1 / -1;
grid-row: 3;
justify-self: center;
}
.evento-lightbox__nav--anterior {
grid-column: 1;
grid-row: 2;
}
.evento-lightbox__nav--siguiente {
grid-column: 2;
grid-row: 2;
justify-self: end;
}
}