/* =========================================================================
   Bellota V2 — Lightbox compartido
   =========================================================================
   Usado por cualquier módulo que quiera mostrar imágenes ampliadas con
   navegación anterior/siguiente. Selector: `[data-lightbox="{grupo}"]`.
   Todas las imágenes con el mismo valor de `data-lightbox` se agrupan y
   se pueden recorrer con flechas ‹/› o teclado.
   ========================================================================= */
.lightbox {
    position: fixed; inset: 0; z-index: 9999;
    display: none; align-items: center; justify-content: center;
    background: rgba(0,0,0,.86); padding: 24px;
}
.lightbox.is-open { display: flex; }
.lightbox-figure {
    position: relative;
    max-width: 92vw; max-height: 88vh;
    display: flex; align-items: center; justify-content: center;
}
.lightbox-img {
    max-width: 92vw; max-height: 88vh;
    object-fit: contain; background: #fff; padding: 16px;
    display: block;
}
.lightbox-close {
    position: absolute; top: 20px; right: 24px;
    background: none; border: 0; color: #fff; font-size: 32px; cursor: pointer; line-height: 1;
    z-index: 3;
}
.lightbox-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: rgba(255,255,255,.15); border: 0;
    color: #fff; font-size: 34px; line-height: 1;
    width: 48px; height: 48px; border-radius: 50%;
    cursor: pointer;
    display: grid; place-items: center;
    transition: background .12s ease;
    z-index: 3;
}
.lightbox-nav:hover { background: rgba(255,255,255,.28); }
.lightbox-nav--prev { left: 24px; }
.lightbox-nav--next { right: 24px; }
.lightbox-nav[hidden] { display: none; }
.lightbox-counter {
    position: absolute; bottom: 20px; left: 50%;
    transform: translateX(-50%);
    color: #fff; font-size: 13px; letter-spacing: .05em;
    background: rgba(0,0,0,.45); padding: 4px 12px; border-radius: 12px;
}

/* Cursor zoom sobre el enlace que abre el lightbox */
[data-lightbox] { cursor: zoom-in; display: block; }