/* ==========================================================================
   Vikingo Custom Lightbox Theme (White Theme for lightGallery)
   ========================================================================== */

/* 1. Backdrop / Fondo Blanco */
.lg-backdrop {
    background-color: #ffffff !important;
}

/* 2. Barras de Herramientas y Subtítulo / Pie de Foto Transparentes/Blancos */
.lg-toolbar,
.lg-sub-html {
    background-color: rgba(255, 255, 255, 0.95) !important;
    color: #333333 !important;
}

/* 3. Textos del Pie de Foto en Gris Oscuro */
.lg-sub-html h4 {
    color: #333333 !important;
}
.lg-sub-html .dgwt-jg-item-desc {
    color: #555555 !important;
}
.lg-sub-html .dgwt-jg-item-desc > a {
    color: #333333 !important;
    border-bottom-color: #333333 !important;
}

/* 4. Contador de Imágenes en Gris Oscuro (Superior Izquierda) */
#lg-counter {
    color: #333333 !important;
}

/* 5. Todos los Iconos en Gris Oscuro / Hover en Negro */
.lg-outer .lg-icon,
.lg-toolbar .lg-icon,
.lg-outer .lg-toogle-thumb {
    color: #333333 !important;
}
.lg-outer .lg-icon:hover,
.lg-toolbar .lg-icon:hover,
.lg-outer .lg-toogle-thumb:hover {
    color: #000000 !important;
}

/* 6. Barra de Miniaturas Inferior (Fondo Blanco y Borde Sutil) */
.lg-outer .lg-thumb-outer {
    background-color: #ffffff !important;
    border-top: 1px solid #e0e0e0 !important;
}
.lg-outer .lg-toogle-thumb {
    background-color: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
    border-bottom: none !important;
}
.lg-outer .lg-thumb-item {
    border-color: #ffffff !important; /* Miniaturas inactivas con borde blanco */
}
.lg-outer .lg-thumb-item.active,
.lg-outer .lg-thumb-item:hover {
    border-color: #333333 !important; /* Borde gris oscuro en miniatura activa */
}

/* 7. Botones de Flechas de Navegación */
.lg-actions .lg-next,
.lg-actions .lg-prev {
    background-color: rgba(0, 0, 0, 0.05) !important; /* Fondo gris sumamente sutil y translúcido */
    color: #333333 !important;
    border-radius: 4px !important;
}
.lg-actions .lg-next:hover,
.lg-actions .lg-prev:hover {
    background-color: rgba(0, 0, 0, 0.1) !important;
    color: #000000 !important;
}

/* 8. Ajustes de Tamaño de Flechas para Escritorio (Desktop) - 35% más grande */
@media (min-width: 992px) {
    .lg-actions .lg-next,
    .lg-actions .lg-prev {
        font-size: 30px !important; /* 22px * 1.35 = ~30px */
        padding: 12px 14px 13px !important; /* Proporcionalmente más grandes */
        margin-top: -24px !important; /* Re-centrado vertical */
    }
}