/* ============================================================
   Corticolors - Scroll Tejidos v1.4.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 > .cst-scrollable {
    display:     flex !important;
    flex-wrap:   nowrap !important;
    align-items: flex-start;
    gap:         8px;
    padding:     2px 0;
}

/* ------------------------------------------------------------------
   IMPORTANTE: la lógica condicional de UniCPO oculta el campo poniendo
   style="display:none" en línea. Estas reglas garantizan que ese
   display:none gane SIEMPRE al flex de arriba (mismo !important, mayor
   especificidad y declaradas después).
   ------------------------------------------------------------------ */
.cst-scroll-area > .cst-scrollable[style*="display:none"],
.cst-scroll-area > .cst-scrollable[style*="display: none"] {
    display: none !important;
}

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

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

/* Imágenes: se respeta exactamente el tamaño que define UniCPO (sin override) */

/* ── 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 completo cuando UniCPO desactiva el campo */
.cst-arrow.cst-hidden { display: none !important; }

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

div.cst-wrapper.cst-hidden .cst-scroll-area > .cst-scrollable {
    display: none !important;
}