/* =============================================================================
   Categorías Slider — cat-slider.css
   ============================================================================= */

/* Contenedor principal */
.cat-slider {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding: 10px 40px; /* espacio lateral para los botones */
    box-sizing: border-box;
}

/* Pista del slider */
.cat-slider__wrapper {
    display: flex;
    align-items: stretch;
    transition: transform 0.4s ease;
    will-change: transform;
}

/* Cada tarjeta de categoría */
.cat-slider__item {
    flex: 0 0 auto;
    width: 150px;
    margin: 0 8px;
    text-align: center;
}

.cat-slider__item a {
    display: block;
    text-decoration: none;
    color: inherit;
}

.cat-slider__item img {
    width: 80%;
    height: 120px;
    object-fit: cover;
    border-radius: 8px;
    display: block;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cat-slider__item img:hover {
    transform: scale(1.04);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

.cat-slider__item p {
    margin: 15px 0 0;
    font-size: 15px;
    font-weight: 600;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Botones prev / next */
.cat-slider__btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 50%;
    width: 34px;
    height: 34px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    transition: background 0.2s, box-shadow 0.2s;
    z-index: 10;
    padding: 0;
    color: transparent;
    overflow: visible;
    -webkit-appearance: none;
    appearance: none;
}

/* Flecha dibujada con CSS — no depende de fuentes ni caracteres */
.cat-slider__btn::after {
    content: '';
    display: block;
    width: 9px;
    height: 9px;
    border-top: 2px solid #555;
    border-right: 2px solid #555;
    border-radius: 1px;
    flex-shrink: 0;
}

.cat-slider__btn--prev { left: 2px; }
.cat-slider__btn--prev::after {
    transform: rotate(-135deg) translate(-1px, 1px); /* apunta <- */
}

.cat-slider__btn--next { right: 2px; }
.cat-slider__btn--next::after {
    transform: rotate(45deg) translate(-1px, 1px); /* apunta -> */
}

.cat-slider__btn:hover {
    background: #f0f0f0;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
}

.cat-slider__btn:hover::after {
    border-color: #222;
}

/* Responsive 600px */
@media (max-width: 600px) {
    .cat-slider__item,
    .category-item {
        width: 110px;
    }
    .cat-slider__item img,
    .category-item img {
        height: 90px;
    }
    .cat-slider__item p,
    .category-item p {
        font-size: 15px; /* igual que pantalla grande */
    }
}

/* Moviles pequenos <= 480px */
@media (max-width: 480px) {
    .cat-slider__item,
    .category-item {
        width: 90px;
        margin: 0 5px;
    }
    .cat-slider__item img,
    .category-item img {
        height: 75px;
    }
    .cat-slider__item p,
    .category-item p {
        font-size: 14px; /* apenas menor, sigue legible */
        white-space: normal; /* permite salto si el nombre es largo */
    }
}

/* =============================================================================
   Compatibilidad con clases antiguas (.category-slider / .slider-wrapper)
   — reemplaza el CSS de Apariencias > CSS Adicional. Puedes borrar ese bloque.
   ============================================================================= */

.category-slider {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding: 10px 40px;
    box-sizing: border-box;
}

.slider-wrapper {
    display: flex;
    align-items: stretch;
    transition: transform 0.4s ease;
    will-change: transform;
}

.category-item {
    flex: 0 0 auto;
    width: 150px;
    margin: 0 8px;
    text-align: center;
}

.category-item a {
    display: block;
    text-decoration: none;
    color: inherit;
}

.category-item img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: 8px;
    display: block;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.category-item img:hover {
    transform: scale(1.04);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

.category-item p {
    margin: 6px 0 0;
    font-size: 15px;
    font-weight: 600;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Botones viejos .prev / .next */
.category-slider .prev,
.category-slider .next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 50%;
    width: 34px;
    height: 34px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    transition: background 0.2s, box-shadow 0.2s;
    z-index: 10;
    padding: 0;
    color: transparent;
    overflow: visible;
    -webkit-appearance: none;
    appearance: none;
}

.category-slider .prev::after,
.category-slider .next::after {
    content: '';
    display: block;
    width: 9px;
    height: 9px;
    border-top: 2px solid #555;
    border-right: 2px solid #555;
    border-radius: 1px;
    flex-shrink: 0;
}

.category-slider .prev        { left: 2px; }
.category-slider .prev::after { transform: rotate(-135deg) translate(-1px, 1px); }

.category-slider .next        { right: 2px; }
.category-slider .next::after { transform: rotate(45deg) translate(-1px, 1px); }

.category-slider .prev:hover,
.category-slider .next:hover  { background: #f0f0f0; box-shadow: 0 3px 10px rgba(0,0,0,0.18); }

.category-slider .prev:hover::after,
.category-slider .next:hover::after { border-color: #222; }