/* ============================================================
   MarketBox · Controles de Swiper (flechas + paginación)

   FUENTE ÚNICA para toda la tienda: banner, destacados y galería de
   producto comparten superficie, borde, radio, sombra y acento.
   Antes había cuatro copias divergentes del mismo bloque
   (tienda/header.css, el <style> de tienda/home.php y dos bloques
   dentro de tienda/detalle_producto.css), casi todas con !important,
   así que el mismo botón cambiaba de forma según la página.

   Se carga DESPUÉS de swiper-bundle.min.css (ver tienda/header.php),
   que es lo que permite ganarle sin recurrir a !important.

   Para adaptar los controles a un carrusel concreto, redefine las
   variables sobre su contenedor .swiper — no vuelvas a declarar el
   aspecto. Ejemplo:
       .mi-carrusel { --swiper-navigation-size: 34px; }
   ============================================================ */

.swiper {
    /* Geometría: la lee tanto este CSS como el JS de Swiper */
    --swiper-navigation-size: 40px;
    --swiper-navigation-sides-offset: 12px;
    --swiper-pagination-bottom: 12px;
    --swiper-pagination-bullet-width: 8px;
    --swiper-pagination-bullet-height: 8px;
    --swiper-pagination-bullet-horizontal-gap: 4px;
    --swiper-pagination-bullet-inactive-color: var(--box-text-muted);
    --swiper-pagination-bullet-inactive-opacity: 0.55;
    --swiper-pagination-color: var(--box-brand);

    /* Piel compartida por flechas y bullets */
    --mb-swiper-surface: color-mix(in srgb, var(--box-surface-raised) 88%, transparent);
    --mb-swiper-border: var(--box-border);
    --mb-swiper-fg: var(--box-text);
    --mb-swiper-accent: var(--box-brand);
    --mb-swiper-accent-fg: var(--box-text-on-brand);
    /* Ojo: no existe --boxp-shadow-md. La escala es sm / (sin sufijo) / lg. */
    --mb-swiper-shadow: var(--boxp-shadow);
    --mb-swiper-pill-w: 22px;
}

/* ------------------------------------------------------------
   Reset de la piel de botón heredada de BoxUI.
   Swiper marca sus flechas con role="button" y genera los bullets como
   <span role="button">, así que la regla global de BoxUI
   (boxui-public/21-public-tokens.css) les aplicaba fondo de acento,
   padding 0.75/1.5rem y min-height de control: las flechas salían como
   rectángulos de 53x46 y los bullets se solapaban entre sí.
   ------------------------------------------------------------ */
[data-ui-context="public"] .swiper-button-next,
[data-ui-context="public"] .swiper-button-prev,
[data-ui-context="public"] .swiper-pagination-bullet {
    gap: 0;
    padding: 0;
    min-height: 0;
    min-width: 0;
    font-weight: 400;
    box-shadow: none;
    translate: none;
}

/* ------------------------------------------------------------
   Flechas anterior / siguiente
   ------------------------------------------------------------ */
[data-ui-context="public"] .swiper-button-next,
[data-ui-context="public"] .swiper-button-prev {
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--swiper-navigation-size);
    height: var(--swiper-navigation-size);
    margin-top: calc(var(--swiper-navigation-size) / -2);
    border: 1px solid var(--mb-swiper-border);
    border-radius: 50%;
    background-color: var(--mb-swiper-surface);
    color: var(--mb-swiper-fg);
    box-shadow: var(--mb-swiper-shadow);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0.9;
    transition: opacity var(--boxp-dur) var(--boxp-ease),
                transform var(--boxp-dur) var(--boxp-ease),
                background-color var(--boxp-dur) var(--boxp-ease),
                border-color var(--boxp-dur) var(--boxp-ease),
                color var(--boxp-dur) var(--boxp-ease);
}

/* El glifo viene de la fuente swiper-icons y no escala con el botón */
[data-ui-context="public"] .swiper-button-next::after,
[data-ui-context="public"] .swiper-button-prev::after {
    font-size: calc(var(--swiper-navigation-size) * 0.375);
    font-weight: 700;
}

[data-ui-context="public"] .swiper-button-next:hover,
[data-ui-context="public"] .swiper-button-prev:hover {
    background-color: var(--mb-swiper-accent);
    border-color: var(--mb-swiper-accent);
    color: var(--mb-swiper-accent-fg);
    opacity: 1;
    transform: scale(1.06);
}

[data-ui-context="public"] .swiper-button-next:focus-visible,
[data-ui-context="public"] .swiper-button-prev:focus-visible,
[data-ui-context="public"] .swiper-pagination-bullet:focus-visible {
    outline: 2px solid var(--mb-swiper-accent);
    outline-offset: 2px;
    opacity: 1;
}

/* Primer / último slide: la flecha se apaga pero conserva su sitio,
   para que el carrusel no descoloque su contenido */
[data-ui-context="public"] .swiper-button-disabled {
    opacity: 0.35;
    pointer-events: none;
}

/* ------------------------------------------------------------
   Paginación
   ------------------------------------------------------------ */
[data-ui-context="public"] .swiper-pagination {
    z-index: 10;
}

[data-ui-context="public"] .swiper-pagination-bullet {
    width: var(--swiper-pagination-bullet-width);
    height: var(--swiper-pagination-bullet-height);
    border: 0;
    border-radius: var(--boxp-radius-pill);
    background: var(--swiper-pagination-bullet-inactive-color);
    opacity: var(--swiper-pagination-bullet-inactive-opacity);
    transition: width var(--boxp-dur) var(--boxp-ease),
                background-color var(--boxp-dur) var(--boxp-ease),
                opacity var(--boxp-dur) var(--boxp-ease);
}

[data-ui-context="public"] .swiper-pagination-bullet-active {
    width: var(--mb-swiper-pill-w);
    background: var(--swiper-pagination-color);
    opacity: 1;
}

/* ------------------------------------------------------------
   Adaptaciones responsivas y de preferencias
   ------------------------------------------------------------ */
@media (max-width: 640px) {
    .swiper {
        --swiper-navigation-size: 34px;
        --swiper-navigation-sides-offset: 8px;
        --swiper-pagination-bottom: 8px;
        --mb-swiper-pill-w: 18px;
    }
}

/* En táctil no hay hover que revelar: sin el rebote de escala */
@media (hover: none) {
    [data-ui-context="public"] .swiper-button-next:hover,
    [data-ui-context="public"] .swiper-button-prev:hover {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    [data-ui-context="public"] .swiper-button-next,
    [data-ui-context="public"] .swiper-button-prev,
    [data-ui-context="public"] .swiper-pagination-bullet {
        transition: none;
    }
    [data-ui-context="public"] .swiper-button-next:hover,
    [data-ui-context="public"] .swiper-button-prev:hover {
        transform: none;
    }
}