/* ============================================================
   ARCHIVO: arrows-positioned.css
   PROPÓSITO: Flechas minimalistas y elegantes para navegación
   Diseño exclusivo para clientes empresariales
   ============================================================ */

/* Ocultar flechas de Slick completamente */
.slick-prev,
.slick-next,
.wpgs-for .slick-prev,
.wpgs-for .slick-next,
.wpgs-nav .slick-prev,
.wpgs-nav .slick-next {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: -9999 !important;
}

/* ============================================================
   FLECHAS PARA IMAGEN PRINCIPAL (wpgs-for)
   ============================================================ */

.wpgs-main-arrows {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none !important;
    z-index: 100 !important;
}

.wpgs-main-arrow {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 140px !important;
    height: 140px !important;
    background: none !important;
    border: none !important;
    color: #333333 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
    pointer-events: auto !important;
    z-index: 1000 !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
    box-shadow: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    overflow: visible !important;
}

.wpgs-main-arrow:focus {
    outline: none !important;
    box-shadow: none !important;
}

.wpgs-main-arrow-svg {
    width: 35px !important;
    height: 35px !important;
    stroke: #333333 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    stroke-width: 2px !important;
    fill: none !important;
    transition: all 0.3s ease !important;
}

.wpgs-main-arrow:hover .wpgs-main-arrow-svg {
    stroke: #000000 !important;
    stroke-width: 2.4px !important;
}

.wpgs-main-arrow:active .wpgs-main-arrow-svg {
    stroke: #666666 !important;
    stroke-width: 1.6px !important;
}

.wpgs-main-arrow-prev {
    left: 3px !important;
    margin-left: -61px !important;
}

.wpgs-main-arrow-next {
    right: 3px !important;
    margin-right: -61px !important;
}

@media (max-width: 1024px) {
    .wpgs-main-arrow {
        width: 99px !important;
        height: 99px !important;
    }
    .wpgs-main-arrow-svg {
        width: 32px !important;
        height: 32px !important;
    }
    .wpgs-main-arrow-prev {
        margin-left: -50px !important;
    }
    .wpgs-main-arrow-next {
        margin-right: -50px !important;
    }
}

@media (max-width: 768px) {
    .wpgs-main-arrow {
        width: 76px !important;
        height: 76px !important;
    }
    .wpgs-main-arrow-svg {
        width: 29px !important;
        height: 29px !important;
    }
    .wpgs-main-arrow-prev {
        margin-left: -38px !important;
    }
    .wpgs-main-arrow-next {
        margin-right: -38px !important;
    }
}

@media (max-width: 480px) {
    .wpgs-main-arrow {
        width: 61px !important;
        height: 61px !important;
    }
    .wpgs-main-arrow-svg {
        width: 26px !important;
        height: 26px !important;
    }
    .wpgs-main-arrow-prev {
        margin-left: -31px !important;
    }
    .wpgs-main-arrow-next {
        margin-right: -31px !important;
    }
}

/* ============================================================
   FLECHAS PARA MINIATURAS
   ============================================================ */

.wpgs-thumb-arrow {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 73px !important;
    height: 73px !important;
    background: none !important;
    border: none !important;
    color: #333333 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    pointer-events: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
    box-shadow: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    overflow: visible !important;
    vertical-align: middle !important;
}

.wpgs-thumb-arrow:focus {
    outline: none !important;
    box-shadow: none !important;
}

.wpgs-thumb-arrow-svg {
    width: 20px !important;
    height: 20px !important;
    stroke: #333333 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    stroke-width: 2px !important;
    fill: none !important;
    transition: all 0.3s ease !important;
}

.wpgs-thumb-arrow:hover .wpgs-thumb-arrow-svg {
    stroke: #000000 !important;
    stroke-width: 2.4px !important;
}

.wpgs-thumb-arrow:active .wpgs-thumb-arrow-svg {
    stroke: #666666 !important;
    stroke-width: 1.6px !important;
}

/* ============================================================
   SCROLL HORIZONTAL PARA MINIATURAS
   ============================================================ */

.wpgs-nav {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin !important;
    scrollbar-color: #ccc #f1f1f1 !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 73px !important;
    display: inline-block !important;
    vertical-align: middle !important;
    width: calc(100% - 146px) !important;
    box-sizing: border-box !important;
}

.wpgs-nav::-webkit-scrollbar {
    height: 8px !important;
}

.wpgs-nav::-webkit-scrollbar-track {
    background: #f1f1f1 !important;
    border-radius: 10px !important;
}

.wpgs-nav::-webkit-scrollbar-thumb {
    background: #ccc !important;
    border-radius: 10px !important;
}

.wpgs-nav::-webkit-scrollbar-thumb:hover {
    background: #999 !important;
}

/* ============================================================
   HOVER EFFECT PARA MINIATURAS SELECCIONADAS
   ============================================================ */

.wpgs-nav .slick-current {
    opacity: 1 !important;
}

.wpgs-nav .slick-current img,
.wpgs-nav .slick-slide img {
    transition: opacity 0.3s ease !important;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1024px) {
    .wpgs-thumb-arrow {
        width: 62px !important;
        height: 62px !important;
    }
    .wpgs-thumb-arrow-svg {
        width: 19px !important;
        height: 19px !important;
    }
    .wpgs-nav {
        height: 62px !important;
        width: calc(100% - 124px) !important;
    }
}

@media (max-width: 768px) {
    .wpgs-thumb-arrow {
        width: 52px !important;
        height: 52px !important;
    }
    .wpgs-thumb-arrow-svg {
        width: 17px !important;
        height: 17px !important;
    }
    .wpgs-nav {
        height: 52px !important;
        width: calc(100% - 104px) !important;
    }
}

@media (max-width: 480px) {
    .wpgs-thumb-arrow {
        width: 45px !important;
        height: 45px !important;
    }
    .wpgs-thumb-arrow-svg {
        width: 15px !important;
        height: 15px !important;
    }
    .wpgs-nav {
        height: 45px !important;
        width: calc(100% - 90px) !important;
    }
}