/* ================================================
   Graphica — Slider Global
   ================================================
   Estructura HTML requerida:
     <div class="grph-slider [modificadores]">
       <button class="grph-slider__prev"></button>
       <div class="grph-slider__track">
         <div class="grph-slider__slides">
           <div class="grph-slider__slide">...</div>
         </div>
       </div>
       <button class="grph-slider__next"></button>
     </div>

   Clases modificadoras (agregar al .grph-slider):
     .center-mode   → centra el slide activo, muestra vecinos
     .loop          → loop infinito (clona primer y último slide)

   Variable CSS para flecha (sobreescribir por plantilla):
     --grph-arrow: url('../../media/gflecha.png')
================================================ */

.grph-slider {
    --grph-arrow: url('../../media/gflecha.png');
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    overflow: hidden;
}

.grph-slider__track {
    flex: 1;
    overflow: hidden;
    position: relative;
    min-width: 0;
}

.grph-slider__slides {
    display: flex;
    transition: transform 0.4s ease;
    will-change: transform;
    position: relative;
    z-index: 1;
}

.grph-slider__slide {
    flex: 0 0 100%;
    width: 100%;
    overflow: hidden;
    border-radius: 5px;
}

/* ── Gap entre slides ── */
.grph-slider.gap-5  .grph-slider__slides { gap: 5px; }
.grph-slider.gap-10 .grph-slider__slides { gap: 10px; }
.grph-slider.gap-15 .grph-slider__slides { gap: 15px; }
.grph-slider.gap-20 .grph-slider__slides { gap: 20px; }
.grph-slider.gap-25 .grph-slider__slides { gap: 25px; }
.grph-slider.gap-30 .grph-slider__slides { gap: 30px; }

/* ── Center mode ── */
.grph-slider.center-mode { overflow: visible; }
.grph-slider.center-mode .grph-slider__track { overflow: visible; }
.grph-slider.center-mode .grph-slider__slide {
    flex: 0 0 90%;
    width: 90%;
}

/* ── Arrows ── */
.grph-slider__prev,
.grph-slider__next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 10;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
}

.grph-slider__prev { left: 0; }
.grph-slider__next { right: 0; }

.grph-slider__prev::before,
.grph-slider__next::before {
    content: '';
    display: block;
    width: 34px;
    height: 34px;
    background: var(--grph-arrow) no-repeat center / contain;
}

.grph-slider__prev::before {
    transform: scaleX(-1);
}