/**
 * Archivo NUEVO: assets/css/shared/gallery-lightbox.css
 * Versión: 1.1.0
 * Creado: DEUDA-PHYTALLAGE-003, primera pieza (cambio de imagen
 *         principal al clicar una miniatura) — 2026-09-06
 * Actualizado: DEUDA-PHYTALLAGE-003, segunda pieza (lightbox a
 *              pantalla completa con zoom y navegación) — 2026-09-06
 *
 * Componente global de galería de producto con lightbox/zoom
 * (assets/js/shared/gallery-lightbox.js). El overlay reutiliza las
 * clases .ltn-modal-overlay / .ltn-modal-content del sistema de modal
 * ya existente (shared/modals.css) para heredar su comportamiento de
 * apertura/cierre (JS en assets/js/global.js) -- este archivo NO toca
 * modals.css, solo sobrescribe la PIEL visual de esas dos clases con
 * selectores de mayor especificidad (.ltn-gallery-lightbox /
 * .ltn-gallery-lightbox__content), porque .ltn-modal-content trae una
 * caja blanca pequeña de ancho fijo (pensada para formularios/
 * confirmaciones) que no encaja con una imagen a pantalla completa.
 *
 * El botón de cierre reutiliza también .ltn-modal-close.dark-header
 * (ya definido en modals.css para X blanca sobre fondo oscuro) -- solo
 * se reposiciona aquí como fixed en la esquina de la ventana.
 *
 * El estado .active de las miniaturas (fuera del lightbox) ya está
 * estilizado en el tema (phytallage/assets/css/single-product.css,
 * .single-product-ltn .gallery .thumb.active) -- no se toca aquí.
 */

/* Overlay: mismo comportamiento que .ltn-modal-overlay (fixed, flex
   centrado, z-index, transición opacity/visibility), fondo más oscuro
   que el modal estándar para dar protagonismo a la imagen. */
.ltn-gallery-lightbox.ltn-modal-overlay {
    background: var(--ltn-overlay-dark-80, rgba(52, 58, 64, 0.8));
}

/* Content: sustituye la caja blanca de ancho fijo por un área
   transparente que ocupa la mayor parte del viewport, centrando la
   imagen dentro. Conserva de .ltn-modal-content la transición de
   escala al abrir/cerrar (transform: scale(), heredada de modals.css). */
.ltn-gallery-lightbox__content.ltn-modal-content {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    width: 90vw;
    height: 90vh;
    max-width: 1400px;
    max-height: 90vh;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ltn-gallery-lightbox__image {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: var(--ltn-border-radius-lg, 12px);
    box-shadow: var(--ltn-shadow-lg, 0 8px 16px rgba(80, 103, 39, 0.2));
    display: block;
}

/* Botón de cierre: reposicionado como fixed en la esquina de la
   ventana (no del área de imagen, que puede ser más pequeña que la
   pantalla en fotos con proporción distinta a 1:1). Tamaño/colores ya
   los aporta .ltn-modal-close.dark-header. */
.ltn-gallery-lightbox__close {
    position: fixed;
    top: var(--ltn-spacing-lg, 24px);
    right: var(--ltn-spacing-lg, 24px);
    background: var(--ltn-overlay-white-20, rgba(255, 255, 255, 0.2));
}

.ltn-gallery-lightbox__close:hover {
    background: var(--ltn-overlay-white-30, rgba(255, 255, 255, 0.3));
}

/* Flechas de navegación: fijas a ambos lados de la ventana, centradas
   verticalmente -- independientes del tamaño real de la imagen. */
.ltn-gallery-lightbox__nav {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 999px;
    border: 0;
    background: var(--ltn-overlay-white-20, rgba(255, 255, 255, 0.2));
    color: var(--ltn-white, #FFFFFF);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--ltn-transition-fast, all 0.15s ease);
}

.ltn-gallery-lightbox__nav:hover {
    background: var(--ltn-overlay-white-30, rgba(255, 255, 255, 0.3));
}

.ltn-gallery-lightbox__prev {
    left: var(--ltn-spacing-lg, 24px);
}

.ltn-gallery-lightbox__next {
    right: var(--ltn-spacing-lg, 24px);
}

/* Indicador de posición "N / total" */
.ltn-gallery-lightbox__counter {
    position: fixed;
    bottom: var(--ltn-spacing-lg, 24px);
    left: 50%;
    transform: translateX(-50%);
    color: var(--ltn-white, #FFFFFF);
    background: var(--ltn-overlay-white-20, rgba(255, 255, 255, 0.2));
    padding: var(--ltn-spacing-xs, 4px) var(--ltn-spacing-md, 16px);
    border-radius: var(--ltn-border-radius, 8px);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

@media (max-width: 600px) {
    .ltn-gallery-lightbox__content.ltn-modal-content {
        width: 95vw;
        height: 80vh;
    }

    .ltn-gallery-lightbox__nav {
        width: 40px;
        height: 40px;
    }

    .ltn-gallery-lightbox__prev {
        left: var(--ltn-spacing-sm, 8px);
    }

    .ltn-gallery-lightbox__next {
        right: var(--ltn-spacing-sm, 8px);
    }

    .ltn-gallery-lightbox__close {
        top: var(--ltn-spacing-sm, 8px);
        right: var(--ltn-spacing-sm, 8px);
    }
}