/**
 * Widget galería B2B — contrato BEM (.infocode-gallery).
 * Se carga después del theme (public/css/default.css | dark.css | …) y usa las variables :root de cada theme.
 */

.infocode-gallery {
    --infocode-gallery-gap: 1rem;
    --infocode-gallery-surface-main: var(--background, #ffffff);
    --infocode-gallery-surface-thumbs: var(--background, #ffffff);
    --infocode-gallery-nav-fg: var(--primary, #1479ff);
    --infocode-gallery-nav-bg: rgba(255, 255, 255, 0.85);
    --infocode-gallery-hint-fg: var(--secondary-text, #9ca3af);
}

.infocode-gallery__thumbs {
    background-color: var(--infocode-gallery-surface-thumbs);
}

/* Misma superficie en el interior de Swiper (evita franjas blancas si otra hoja pinta .swiper). */
.infocode-gallery__thumbs.swiper,
.infocode-gallery__thumbs .swiper-wrapper {
    background-color: var(--infocode-gallery-surface-thumbs);
}

.infocode-gallery__main {
    background-color: var(--infocode-gallery-surface-main);
}

.infocode-gallery__thumbs .swiper-button-next::after,
.infocode-gallery__thumbs .swiper-button-prev::after,
.infocode-gallery__main .swiper-button-next::after,
.infocode-gallery__main .swiper-button-prev::after {
    color: var(--infocode-gallery-nav-fg);
}

.infocode-gallery__thumbs .swiper-button-next,
.infocode-gallery__thumbs .swiper-button-prev {
    background-color: var(--infocode-gallery-nav-bg) !important;
}

.infocode-gallery__main .swiper-button-next,
.infocode-gallery__main .swiper-button-prev {
    background-color: var(--infocode-gallery-nav-bg);
}

.infocode-gallery__hint {
    margin: 0;
    color: var(--infocode-gallery-hint-fg);
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.infocode-gallery__media {
    max-width: 100%;
}

.infocode-gallery--layout-360 .infocode-gallery__main {
    background-color: var(--infocode-gallery-surface-main);
}