/* ═════════════════════════════════════════════════════════════════════════════
   VISOR DE FOTOS A PANTALLA COMPLETA

   Compartido por el carrusel y la galería. Antes vivía dentro de la hoja del
   carrusel, y cualquier otra pantalla que quisiera abrir una foto tenía que
   copiarlo. Se carga con assets/js/viewer.js.
   ═════════════════════════════════════════════════════════════════════════════ */

/* --- OVERLAY PANTALLA COMPLETA --- */
#gallery-overlay {
    position: fixed;
    inset: 0;
    /* Fondo mucho más oscuro, casi negro puro */
    background-color: rgba(0, 0, 0, 0.98);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(5px);
}

#gallery-overlay.active {
    opacity: 1;
    pointer-events: auto;
    touch-action: none;
}

.overlay-content {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    /* Sin medidas propias: el hueco lo define la imagen, no al revés. Antes
       este contenedor imponía el 60 % del ancho de la ventana y la imagen se
       estiraba hasta llenarlo, sin respetar su proporción. */
}

/* La regla original apuntaba a #overlay-img, un identificador que este visor no
   usa: no se aplicaba ninguna medida y las fotos salían a tamaño natural —2560
   píxeles, casi el doble del ancho de la pantalla—. Ahora la imagen conserva su
   proporción y se queda dentro de unos topes cómodos de lectura, como cualquier
   visor de galería. */
.overlay-image {
    display: block;
    width: auto;
    height: auto;
    max-width: min(62vw, 900px);
    max-height: 78svh;
    object-fit: contain;
    box-shadow: 0 0 30px rgba(0, 0, 0, .8);
    cursor: default;
}

@media (max-width: 768px) {
    /* En móvil no sobra el espacio lateral: se aprovecha casi todo el ancho. */
    .overlay-image {
        max-width: 88vw;
        max-height: 72svh;
    }
}

/* 👇 VARIABLES DE CONTROL: FLECHAS DEL OVERLAY 👇 */
:root {
    --arrow-box-size: 40px;
    /* Tamaño del cuadrado blanco (El cursor era de 90px) */
    --arrow-box-bg: transparent;
    /* Color de fondo del cuadrado */
    --arrow-color: white;
    /* Color de la flecha */

    --arrow-size: 12px;
    /* Tamaño de la flecha */
    --arrow-thickness: 2px;
    /* Grosor de la línea de la flecha */

    /* Mix blend mode opcional (normal, difference, exclusion...) */
    --arrow-blend-mode: difference;
}

/* 👇 FLECHAS DEL OVERLAY (Diseño Cuadrado tipo Cursor) 👇 */
.overlay-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);

    /* --- ESTRUCTURA DEL CUADRADO --- */
    width: var(--arrow-box-size);
    height: var(--arrow-box-size);
    background: var(--arrow-box-bg);
    border: none;
    border-radius: 0;
    /* Esquinas totalmente rectas */
    padding: 0;

    /* --- COLOR Y MEZCLA --- */
    color: var(--arrow-color);
    mix-blend-mode: var(--arrow-blend-mode);

    /* --- INTERACCIÓN --- */
    cursor: pointer;
    opacity: 0.85;
    /* Un poco más opacos por defecto al ser blancos */
    transition: opacity 0.2s ease, transform 0.2s ease;
    user-select: none;
    z-index: 10;

    /* --- CENTRADO INTERNO --- */
    display: flex;
    align-items: center;
    justify-content: center;
}

.overlay-btn:hover {
    opacity: 1;
    /* Efecto sutil de crecimiento */
    transform: translateY(-50%) scale(1.05);
}

/* La estructura del DIV que forma la flecha */
.css-arrow {
    width: var(--arrow-size);
    height: var(--arrow-size);
    border-top: var(--arrow-thickness) solid currentColor;
    border-right: var(--arrow-thickness) solid currentColor;
    display: block;
    border-radius: 1px;
}

/* Rotaciones y márgenes matemáticos para centrado óptico */
.arrow-left {
    transform: rotate(-135deg);
    /* Desplaza la flecha matemáticamente un tercio de su tamaño para centrarla visualmente */
    margin-left: calc(var(--arrow-size) / 3);
}

.arrow-right {
    transform: rotate(45deg);
    margin-right: calc(var(--arrow-size) / 3);
}

/* Posiciones a los bordes de la pantalla */
.overlay-prev {
    left: 3%;
}

.overlay-next {
    right: 3%;
}

/* --- RESPONSIVE (MÓVIL) --- */
@media (max-width: 768px) {
    .overlay-btn {
        /* Cuadrados un poco más pequeños en móvil */
        width: calc(var(--arrow-box-size) * 0.7);
        height: calc(var(--arrow-box-size) * 0.7);
    }

    .css-arrow {
        width: calc(var(--arrow-size) * 0.8);
        height: calc(var(--arrow-size) * 0.8);
    }
}