/* Visor de imágenes (lightbox.js), equivalente al de Modula: fondo oscuro, contador, flechas y zoom */
.sin-scroll, .sin-scroll body { overflow: hidden; }

.lightbox {
    position: fixed; inset: 0; z-index: 100001;
    display: flex; align-items: center; justify-content: center;
    background: rgba(30, 30, 30, 0.92);
    opacity: 0; transition: opacity 0.25s ease;
}
.lightbox[hidden] { display: none; }
.lightbox.is-abierto { opacity: 1; }

.lightbox__panel { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.lightbox__barra { position: absolute; top: 0; right: 0; display: flex; }
.lightbox__btn {
    display: flex; align-items: center; justify-content: center;
    width: 2.75rem; height: 2.75rem; padding: 0.75rem; border: 0;
    background: rgba(30, 30, 30, 0.6); color: #ccc; transition: color 0.2s;
}
.lightbox__btn:hover { color: var(--color-blanco); }
.lightbox__btn svg, .lightbox__nav svg { width: 100%; height: 100%; fill: currentColor; }
.lightbox__contador { position: absolute; top: 0.9rem; left: 1.25rem; margin: 0; font-size: 0.875rem; color: #ccc; }

.lightbox__figura { max-width: 90vw; max-height: 88vh; margin: 0; overflow: hidden; }
.lightbox__img { display: block; max-width: 90vw; max-height: 88vh; width: auto; height: auto; cursor: zoom-in; transition: transform 0.3s ease; }
.lightbox__figura.is-zoom .lightbox__img { transform: scale(2); cursor: zoom-out; }

.lightbox__nav {
    position: absolute; top: 50%; z-index: 2;
    width: 3.25rem; height: 5rem; margin-top: -2.5rem; padding: 1rem 0.75rem; border: 0;
    background: rgba(30, 30, 30, 0.6); color: #ccc; transition: color 0.2s;
}
.lightbox__nav:hover { color: var(--color-blanco); }
.lightbox__nav--prev { left: 0; }
.lightbox__nav--prev svg { transform: scaleX(-1); }
.lightbox__nav--next { right: 0; }