/* =====================================================
   PAGINACIÓN MODERNA - CHAMOY SPORT
   Catálogo + Index
===================================================== */

.modern-pagination{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:8px;
    width:100%;
    margin:28px 0 8px;
    padding:6px 0;
    border:0;
    background:transparent;
    box-shadow:none;
}

.modern-pagination[hidden]{
    display:none !important;
}

.pagination-pages{
    display:flex;
    align-items:center;
    gap:7px;
}

.modern-pagination .pagination-nav,
.modern-pagination .pagination-page{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:40px;
    min-width:40px;
    padding:0 13px;
    border:1px solid rgba(139,92,246,.38);
    border-radius:999px;
    color:var(--theme-text);
    background:transparent;
    font:inherit;
    font-size:.88rem;
    font-weight:800;
    line-height:1;
    text-decoration:none;
    cursor:pointer;
    transition:
        transform .16s ease,
        border-color .16s ease,
        color .16s ease,
        background .16s ease,
        box-shadow .16s ease;
}

.modern-pagination .pagination-prev{
    width:40px;
    padding:0;
    font-size:1.05rem;
}

.modern-pagination .pagination-next{
    min-width:auto;
    padding:0 17px;
}

.modern-pagination .pagination-nav:hover,
.modern-pagination .pagination-page:hover{
    transform:translateY(-1px);
    border-color:#8b5cf6;
    color:#fff;
    background:rgba(124,58,237,.22);
}

.modern-pagination .pagination-page.is-active{
    color:#fff;
    border-color:#9333ea;
    background:linear-gradient(135deg,#a21caf,#7c3aed);
    box-shadow:0 8px 22px rgba(124,58,237,.24);
}

.modern-pagination .pagination-nav.is-disabled,
.modern-pagination .pagination-nav:disabled{
    opacity:.35;
    cursor:not-allowed;
    pointer-events:none;
    transform:none;
}

.pagination-jump{
    display:flex;
    align-items:center;
    gap:7px;
    margin-left:6px;
    color:var(--theme-text-soft);
    font-size:.82rem;
    font-weight:700;
}

.pagination-jump input{
    width:54px;
    height:40px;
    padding:0 7px;
    border:1px solid rgba(139,92,246,.38);
    border-radius:10px;
    outline:none;
    color:var(--theme-text);
    background:transparent;
    font:inherit;
    font-size:.88rem;
    font-weight:800;
    text-align:center;
    appearance:textfield;
}

.pagination-jump input::-webkit-outer-spin-button,
.pagination-jump input::-webkit-inner-spin-button{
    margin:0;
    -webkit-appearance:none;
}

.pagination-jump input:focus{
    border-color:#8b5cf6;
    box-shadow:0 0 0 3px rgba(139,92,246,.12);
}

.pagination-jump strong{
    color:var(--theme-text-soft);
}

.pagination-submit-hidden{
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
    white-space:nowrap;
    border:0;
    padding:0;
    margin:-1px;
}

html[data-theme="light"] .modern-pagination .pagination-nav,
html[data-theme="light"] .modern-pagination .pagination-page,
html[data-theme="light"] .pagination-jump input{
    border-color:rgba(74,42,163,.22);
    color:#4a2aa3;
    background:#fff;
}

html[data-theme="light"] .modern-pagination .pagination-nav:hover,
html[data-theme="light"] .modern-pagination .pagination-page:hover{
    color:#4a2aa3;
    border-color:#7c3aed;
    background:#f3f0ff;
}

html[data-theme="light"] .modern-pagination .pagination-page.is-active{
    color:#fff;
    border-color:#7c3aed;
    background:linear-gradient(135deg,#9333ea,#6d28d9);
}

@media (max-width:640px){
    .modern-pagination{
        gap:7px;
        margin-top:22px;
    }

    .pagination-pages{
        gap:5px;
    }

    .modern-pagination .pagination-nav,
    .modern-pagination .pagination-page{
        height:36px;
        min-width:36px;
        padding:0 10px;
        font-size:.82rem;
    }

    .modern-pagination .pagination-prev{
        width:36px;
        padding:0;
    }

    .modern-pagination .pagination-next{
        padding:0 12px;
    }

    .pagination-jump{
        width:100%;
        justify-content:center;
        margin:4px 0 0;
    }

    .pagination-jump input{
        width:50px;
        height:36px;
    }
}