/* ====================================================================
 * KummaraDS — kds-carrusel
 * Pasar fotos —o lo que sea— de a una o de a varias, de costado o hacia abajo: con el dedo, la rueda del
 * mouse, las flechas del teclado o los puntitos (#1889).
 *
 * POR QUE ES PROPIO. Antes la galería de la ficha usaba Swiper bajado de internet: una librería ajena
 * entera para algo que el navegador ya sabe hacer. Acá la pista es un contenedor que se desplaza solo
 * (scroll) y "encaja" en cada elemento (scroll-snap): en el teléfono se desliza con el impulso del dedo
 * como cualquier app, con la rueda baja de a una foto, y es accesible sin hacer nada.
 *
 * Uso:
 *   <div class="kds-carrusel">
 *     <div class="kds-carrusel__pista" tabindex="0" aria-label="Fotos del producto">
 *       <div class="kds-carrusel__item">…</div>
 *       …
 *     </div>
 *   </div>
 *   <div class="kds-carrusel__puntos"></div>
 *
 *   new KdsCarrusel(raiz, { direccion: 'vertical', porVista: 4, separacion: 8, bucle: true, puntos: elemento })
 *
 * El alto lo da quien lo usa (el carrusel ocupa todo su contenedor). Los puntitos van donde los ponga la
 * página: fuera del carrusel no los recorta nada.
 * ==================================================================== */

.kds-carrusel {
    --kds-carrusel-por-vista: 1;
    --kds-carrusel-separacion: 0px;
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.kds-carrusel__pista {
    display: flex;
    gap: var(--kds-carrusel-separacion);
    width: 100%;
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scroll-behavior: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.kds-carrusel__pista::-webkit-scrollbar {
    display: none;
}

.kds-carrusel__pista:focus-visible {
    outline: 2px solid var(--ds-text, #111);
    outline-offset: 2px;
}

.kds-carrusel--vertical .kds-carrusel__pista {
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    overscroll-behavior-x: auto;
}

.kds-carrusel__item {
    position: relative;
    flex: 0 0 calc((100% - (var(--kds-carrusel-por-vista) - 1) * var(--kds-carrusel-separacion)) / var(--kds-carrusel-por-vista));
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    scroll-snap-align: start;
}

/* De a uno: un deslizamiento pasa una sola foto, aunque el dedo vaya rápido. */
.kds-carrusel--de-a-uno .kds-carrusel__item {
    scroll-snap-stop: always;
}

/* ----------------------------------------------------------- los puntitos */
.kds-carrusel__puntos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.kds-carrusel__puntos:empty {
    display: none;
}

.kds-carrusel__punto {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #ccc;
    cursor: pointer;
    transition: background-color .2s ease;
}

.kds-carrusel__punto.is-activo {
    background: #000;
}

.kds-carrusel__punto:focus-visible {
    outline: 2px solid var(--ds-text, #111);
    outline-offset: 2px;
}