/* Optimizaciones específicas para monitores 4K */

/* Contenedor principal centrado */
@media (min-width: 1920px) {
    .scroller-inner {
        max-width: 1920px;
        margin: 0 auto;
    }
    
    /* Paginado responsive */
    .pagination {
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .pagination > li > a,
    .pagination > li > span {
        padding: 8px 12px;
        font-size: 14px;
    }
    
    /* Grid de productos */
    .grilla .col-lg-2 {
        width: 12.5%; /* 8 productos por fila en lugar de 6 */
    }
}

@media (min-width: 2560px) {
    .scroller-inner {
        max-width: 2200px;
        margin: 0 auto;
    }
    
    /* Paginado más grande para 2K/4K */
    .pagination > li > a,
    .pagination > li > span {
        padding: 10px 15px;
        font-size: 16px;
    }
    
    /* Grid de productos para 2K */
    .grilla .col-lg-2 {
        width: 10%; /* 10 productos por fila */
    }
    
    /* Elementos del header más grandes */
    #buscador {
        font-size: 16px;
        height: 45px;
    }
    
    .btn-buscador {
        height: 45px;
        font-size: 18px;
    }
}

@media (min-width: 3840px) {
    .scroller-inner {
        max-width: 2800px;
        margin: 0 auto;
    }
    
    /* Paginado para 4K completo */
    .pagination > li > a,
    .pagination > li > span {
        padding: 12px 18px;
        font-size: 18px;
    }
    
    /* Grid de productos para 4K */
    .grilla .col-lg-2 {
        width: 8.33%; /* 12 productos por fila */
    }
    
    /* Elementos del header para 4K */
    #buscador {
        font-size: 18px;
        height: 50px;
    }
    
    .btn-buscador {
        height: 50px;
        font-size: 20px;
    }
    
    /* Menú lateral más grande */
    #div-menu-movil {
        font-size: 18px;
    }
    
    /* Botones y enlaces más grandes */
    .btn {
        font-size: 16px;
        padding: 10px 16px;
    }
}

/* Prevenir overflow horizontal en todas las resoluciones */
@media (min-width: 1920px) {
    body {
        overflow-x: hidden;
    }
    
    .container-fluid {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    /* Asegurar que las imágenes no se desborden */
    img {
        max-width: 100%;
        height: auto;
    }
    
    /* Centrar contenido en pantallas muy anchas */
    .row {
        margin-left: auto;
        margin-right: auto;
    }
}