/**
 * ============================================================================
 *    PAGINATION COMPONENT
 * ============================================================================
 * Componente de paginación modernizado con tokens CSS centralizados.
 * Diseñado para 1920x1080 - toda la información visible sin scroll.
 * 
 * Tokens requeridos: design-tokens.css
 * ============================================================================
 */

/* -----------------------------------------------------------------------------
   Contenedor principal
   ----------------------------------------------------------------------------- */
.pagination-container {
    display: flex;
    justify-content: var(--pagination-container-justify);
    align-items: var(--pagination-container-align);
    gap: var(--pagination-container-gap);
    padding-top: var(--pagination-container-padding-y);
    padding-bottom: var(--pagination-container-padding-y);
    width: 100%;
}

/* Wrapper para los números de página */
.pagination-pages {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

/* -----------------------------------------------------------------------------
   Botones de página (números)
   ----------------------------------------------------------------------------- */
.pagination-link,
.pagination-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: var(--pagination-btn-min-width);
    height: var(--pagination-btn-height);
    padding-left: var(--pagination-btn-padding-x);
    padding-right: var(--pagination-btn-padding-x);
    background-color: var(--pagination-btn-bg);
    border: var(--border-width) solid var(--pagination-btn-border);
    border-radius: var(--pagination-btn-radius);
    color: var(--pagination-btn-color);
    font-size: var(--pagination-btn-font-size);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    cursor: pointer;
    transition: all var(--pagination-btn-transition);
    user-select: none;
}

/* Hover */
.pagination-link:hover,
.pagination-btn:hover {
    background-color: var(--pagination-btn-hover-bg);
    border-color: var(--pagination-btn-hover-border);
    color: var(--pagination-btn-hover-color);
}

/* Active (página actual) */
.pagination-link.is-active,
.pagination-btn.is-active,
.pagination-link.pagination-current,
.pagination-btn.pagination-current {
    background-color: var(--pagination-btn-active-bg);
    border-color: var(--pagination-btn-active-border);
    color: var(--pagination-btn-active-color);
    box-shadow: var(--pagination-btn-active-shadow);
    cursor: default;
}

/* Disabled */
.pagination-link.is-disabled,
.pagination-btn.is-disabled,
.pagination-link.pagination-disabled,
.pagination-btn.pagination-disabled {
    opacity: var(--pagination-btn-disabled-opacity);
    pointer-events: var(--pagination-btn-disabled-pointer-events);
    cursor: not-allowed;
}

/* -----------------------------------------------------------------------------
   Botones Anterior/Siguiente
   ----------------------------------------------------------------------------- */
.pagination-prev,
.pagination-next,
a.pagination-link.pagination-nav {
    padding-left: var(--pagination-nav-padding-x);
    padding-right: var(--pagination-nav-padding-x);
    min-width: var(--pagination-nav-min-width);
    white-space: nowrap;
}

/* -----------------------------------------------------------------------------
   Ellipsis (...)
   ----------------------------------------------------------------------------- */
.pagination-ellipsis,
.pagination-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: var(--pagination-btn-min-width);
    height: var(--pagination-btn-height);
    padding-left: var(--pagination-ellipsis-padding-x);
    padding-right: var(--pagination-ellipsis-padding-x);
    color: var(--pagination-ellipsis-color);
    font-size: var(--pagination-btn-font-size);
}

/* -----------------------------------------------------------------------------
   Info de resultados (texto "Mostrando 1-10 de 22")
   ----------------------------------------------------------------------------- */
.results-info,
.pagination-info {
    color: var(--pagination-info-color);
    font-size: var(--pagination-info-font-size);
    margin: 0;
}

.pagination-info-text {
    color: var(--pagination-info-color);
    font-size: var(--pagination-info-font-size);
}

/* -----------------------------------------------------------------------------
   Selector de items por página
   ----------------------------------------------------------------------------- */
.pagination-per-page {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.pagination-per-page-label {
    color: var(--pagination-info-color);
    font-size: var(--pagination-info-font-size);
    white-space: nowrap;
}

.pagination-per-page select,
.pagination-per-page-input {
    height: var(--pagination-per-page-height);
    padding-left: var(--space-2);
    padding-right: var(--space-2);
    background-color: var(--pagination-per-page-bg);
    border: var(--border-width) solid var(--pagination-per-page-border);
    border-radius: var(--pagination-btn-radius);
    color: var(--pagination-per-page-color);
    font-size: var(--text-sm);
}

/* -----------------------------------------------------------------------------
   Variante compacta (para espacios reducidos)
   ----------------------------------------------------------------------------- */
.pagination-container--compact {
    gap: var(--space-1);
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
}

.pagination-container--compact .pagination-link,
.pagination-container--compact .pagination-btn {
    min-width: 2rem;
    height: 2rem;
    font-size: var(--text-xs);
}

/* -----------------------------------------------------------------------------
   Estados vacío
   ----------------------------------------------------------------------------- */
.pagination-empty {
    display: none;
}

/* -----------------------------------------------------------------------------
   Responsive (móviles)
   ----------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .pagination-container {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .pagination-pages {
        order: 2;
        width: 100%;
        justify-content: center;
        margin-top: var(--space-2);
    }
    
    .pagination-prev,
    .pagination-next {
        order: 1;
    }
    
    .pagination-info {
        order: 3;
        width: 100%;
        text-align: center;
    }
}