/* ============================================================
   Corticolors - Scroll Tejidos v1.3.0
   Agencia IA Solutions
   ============================================================ */

/* Wrapper: flechas + área scroll */
.cst-wrapper {
    position:    relative;
    display:     flex;
    align-items: center;
    gap:         2px;
    width:       100%;
    margin:      6px 0;
}

/* Área de scroll */
.cst-scroll-area {
    overflow-x:        auto;
    overflow-y:        hidden;
    scroll-behavior:   smooth;
    -webkit-overflow-scrolling: touch;
    flex:              1;
    scrollbar-width:   none;
    -ms-overflow-style: none;
    cursor:            grab;
    padding:           4px 0;
}

.cst-scroll-area:active { cursor: grabbing; }
.cst-scroll-area::-webkit-scrollbar { display: none; }

/* Contenedor UniCPO → fila horizontal sin salto */
.cst-scroll-area .uni-module-radio-image-mode {
    display:     flex !important;
    flex-wrap:   nowrap !important;
    align-items: flex-start;
    gap:         8px;
    padding:     2px 0;
}

/* Ocultar radios */
.cst-scroll-area .uni-module-radio-image-mode input[type="radio"] {
    display: none !important;
}

/* Labels: no alterar tamaño, solo evitar que colapsen */
.cst-scroll-area .uni-module-radio-image-mode label.uni-cpo-radio-option-label {
    display:        inline-flex !important;
    flex-direction: column;
    align-items:    center;
    flex-shrink:    0;
    cursor:         pointer;
}

/*
 * Imágenes: respetar EXACTAMENTE lo que UniCPO define.
 * No sobreescribimos width/height — dejamos que el CSS
 * original de UniCPO (frontend.css) controle el tamaño.
 * Solo nos aseguramos de que no herede restricciones nuestras.
 */
.cst-scroll-area .uni-cpo-option-label__image-wrap,
.cst-scroll-area .uni-cpo-option-label__image {
    /* sin override — hereda los estilos de UniCPO */
}

/* ── Flechas: icono fino, botón estrecho y cuadrado ── */
.cst-arrow {
    flex-shrink:     0;
    width:           20px;
    height:          20px;
    border:          none;
    background:      transparent;
    color:           var(--cst-color-flechas, #1ABCB5);
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    cursor:          pointer;
    padding:         0;
    margin:          0;
    line-height:     1;
    vertical-align:  middle;
    opacity:         0.65;
    transition:      opacity 0.2s ease;
    border-radius:   3px;
}

.cst-arrow:hover { opacity: 1; }

.cst-arrow.cst-disabled {
    opacity:        0.18;
    cursor:         default;
    pointer-events: none;
}

.cst-arrow svg {
    display:         block;
    width:           14px;
    height:          14px;
    stroke:          currentColor;
    fill:            none;
    stroke-width:    2.5;
    stroke-linecap:  round;
    stroke-linejoin: round;
    flex-shrink:     0;
}

/* Ocultar flechas o wrapper cuando UniCPO lo desactiva condicionalmente */
.cst-arrow.cst-hidden {
    display: none !important;
}

div.cst-wrapper.cst-hidden {
    display: none !important;
}

/* Debe ganar a .cst-scroll-area .uni-module-radio-image-mode { display:flex !important } */
div.cst-wrapper.cst-hidden .cst-scroll-area .uni-module-radio-image-mode {
    display: none !important;
}