/* ==========================================
   ESTILOS DEL SLIDER DE COLORES (PALETA RAL)
   ========================================== */

/* --- Contenedor Principal del Slider --- */
.ral-container-loader {
    position: relative;
    width: 100%;
    height: 75px;
    border-radius: 8px;
    overflow: hidden;
    background: transparent;
    margin-bottom: 15px;
}

/* --- El Slider (Scroll horizontal oculto) --- */
.ral-slider-outer { 
    width: 100%; 
    height: 75px; 
    overflow-x: auto; 
    overflow-y: hidden; 
    background: transparent; 
    display: flex; 
    scrollbar-width: none; /* Oculta la barra en Firefox */
    touch-action: pan-x; 
    -webkit-overflow-scrolling: touch; 
}

/* Oculta la barra en Chrome, Safari y Edge */
.ral-slider-outer::-webkit-scrollbar { 
    display: none; 
}

/* --- Carril interno de los colores --- */
.ral-track-inner { 
    display: flex; 
    width: max-content; 
}

/* --- Cada muestra de color RAL --- */
.ral-item { 
    width: 140px; 
    height: 75px; 
    flex-shrink: 0; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    text-decoration: none; 
    border-right: 1px solid rgba(0,0,0,0.1); 
    transition: filter 0.2s ease;
}

/* Efecto de brillo al pasar el ratón */
.ral-item:hover {
    filter: brightness(1.1);
}

/* --- Etiqueta de texto (Ej: "RAL 1000") --- */
.ral-item strong { 
    font-size: 11px; 
    color: #fff; 
    text-shadow: 1px 1px 2px #000; 
    background: rgba(0,0,0,0.4); 
    padding: 4px 8px; 
    border-radius: 4px; 
    pointer-events: none; /* Evita que el texto interfiera con el clic del enlace */
}