/* ══════════════════════════════════════════════════════
   TBO Slider de Imágenes
   TBO Soluciones Digitales
   Los controles de Elementor solo escriben variables CSS
   en .tbo-slider; todo el estilo sale de aquí.
══════════════════════════════════════════════════════ */
.tbo-slider {
    --tbo-spv: 1;
    --tbo-gap: 16px;
    --tbo-speed: 500ms;
    --tbo-alto: auto;
    --tbo-radio: 0px;
    --tbo-flecha-tam: 40px;
    --tbo-flecha-color: #ffffff;
    --tbo-flecha-fondo: rgba(0, 0, 0, .45);
    --tbo-punto: #c9c9c9;
    --tbo-punto-activo: #333333;

    position: relative;
    width: 100%;
}

/* En contenedores flex de Elementor con "Alinear elementos: centro" el widget se encoge
   al ancho de su contenido (la imagen a tamaño natural). Forzarlo a ocupar la fila.
   Un ancho personalizado en Avanzado sigue ganando (.elementor-element-xxx es más específico). */
.elementor-widget-tbo-slider-imagenes {
    width: 100%;
    max-width: 100%;
    align-self: stretch;
}

.tbo-slider__viewport {
    overflow: hidden;
    touch-action: pan-y;
}

.tbo-slider__track {
    position: relative; /* offsetLeft de cada slide se mide contra el track */
    display: flex;
    align-items: flex-start;
    gap: var(--tbo-gap);
    transition: transform var(--tbo-speed) ease;
    will-change: transform;
}
.tbo-slider__track.is-sin-transicion { transition: none; }

.tbo-slider__slide {
    flex: 0 0 calc((100% - (var(--tbo-spv) - 1) * var(--tbo-gap)) / var(--tbo-spv));
    min-width: 0;
    overflow: hidden;
    border-radius: var(--tbo-radio);
}

.tbo-slider__link { display: block; }

.tbo-slider .tbo-slider__slide img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: var(--tbo-alto);
    object-fit: cover;
    border-radius: 0;
    -webkit-user-drag: none;
    user-select: none;
}
/* Ajuste de la imagen (clase que pone el render según el control "Ajuste") */
.tbo-slider.tbo-slider--contain .tbo-slider__slide img { object-fit: contain; }
.tbo-slider.tbo-slider--natural .tbo-slider__slide img { height: auto; }

/* De borde a borde de la pantalla. Base solo con CSS (funciona aunque el JS no cargue);
   el JS luego la afina con clientWidth para no contar la barra de scroll. */
.tbo-slider.tbo-slider--pantalla {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
}

/* ── Flechas (selectores con doble clase para ganarle a los estilos de botón del tema) ── */
.tbo-slider .tbo-slider__arrow {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--tbo-flecha-tam);
    height: var(--tbo-flecha-tam);
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--tbo-flecha-fondo);
    color: var(--tbo-flecha-color);
    box-shadow: none;
    line-height: 1;
    cursor: pointer;
    transform: translateY(-50%);
    transition: opacity .2s;
}
.tbo-slider .tbo-slider__arrow:hover,
.tbo-slider .tbo-slider__arrow:focus {
    background: var(--tbo-flecha-fondo);
    color: var(--tbo-flecha-color);
    opacity: .85;
}
.tbo-slider .tbo-slider__arrow:disabled { opacity: .35; cursor: default; }
.tbo-slider .tbo-slider__arrow svg { width: 45%; height: 45%; }
.tbo-slider .tbo-slider__arrow--prev { left: 12px; }
.tbo-slider .tbo-slider__arrow--next { right: 12px; }

/* ── Puntos ── */
.tbo-slider__dots {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
}
.tbo-slider .tbo-slider__dot {
    width: 10px;
    height: 10px;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--tbo-punto);
    box-shadow: none;
    cursor: pointer;
    transition: background .2s, transform .2s;
}
.tbo-slider .tbo-slider__dot:hover { background: var(--tbo-punto-activo); }
.tbo-slider .tbo-slider__dot.is-activo {
    background: var(--tbo-punto-activo);
    transform: scale(1.25);
}

.tbo-slider .tbo-slider__arrow:focus-visible,
.tbo-slider .tbo-slider__dot:focus-visible,
.tbo-slider__link:focus-visible {
    outline: 2px solid var(--tbo-punto-activo);
    outline-offset: 2px;
}

/* Si todas las imágenes caben en pantalla no hay nada que navegar */
.tbo-slider--estatico .tbo-slider__arrow,
.tbo-slider--estatico .tbo-slider__dots { display: none !important; }

@media (prefers-reduced-motion: reduce) {
    .tbo-slider__track { transition: none; }
}