@media (min-width: 992px){  /* Version PC */

    #smart-panel-holder {
        margin-left: 5px;
        height: 32px;
    }

    #campo-buscar-partidos{
        margin-top: -10px;
        margin-bottom: -18px;
    }

    .hdr-main-nav {
        padding: 10px 20px;
        display: flex; 
        align-items: center;
        justify-content: space-between; 
        min-height: 50px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); 
    }

    .nav-menu-container {
        display: flex; 
        align-items: center;
        flex-grow: 1; 
    }

    .nav-menu {
        display: flex; 
        list-style: none; 
        margin: 0;
        padding: 0;
        gap: 8px; 
    }

    .nav-menu-item {
        display: flex; 
        align-items: center;
        padding: 8px 15px;
        background-color: #1A2330 !important;
        color: #fff; 
        font-size: 14px;
        font-weight: bold;
        text-decoration: none; 
        border-radius: 6px; 
        transition: background-color 0.2s ease;
        white-space: nowrap; 
    }

    .nav-menu-item:hover {
        background-color: #555;
    }

    .nav-menu-other {
        list-style: none;
        margin: 0;
        padding: 0;
        position: relative; 
        margin-left: 15px; 
    }

    .nav-menu-other.hidden-global {
        display: none; 
    }

    .nav-menu-other .nav-menu-item {
        background-color: #1A2330;
        color: #fff;
        cursor: pointer;
    }

    .nav-menu-other .nav-menu-item i {
        margin-right: 5px; 
        font-size: 16px;
    }

    .nav-menu-other .nav-menu-sub {
        display: none; 
        position: absolute;
        top: 100%; 
        right: 0; 
        background-color: #2c2c2c; 
        border-radius: 6px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
        min-width: 180px; 
        z-index: 100; 
        padding: 5px 0;
    }

    .nav-menu-other .nav-menu-sub li {
        width: 100%;
    }

    .nav-menu-other .nav-menu-sub .nav-menu-item {
        background-color: transparent; 
        border-radius: 0;
        padding: 10px 15px; 
        width: 100%; 
        box-sizing: border-box; 
    }

    .nav-menu-other .nav-menu-sub .nav-menu-item:hover {
        background-color: #444; 
    }

    .nav-menu-other .nav-menu-sub.show {
        display: block; 
    }


    .more-options-button { 
        background-color: #3d3d3d;
        color: #fff;
        border: none;
        border-radius: 50%;
        width: 35px;
        height: 35px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 20px;
        cursor: pointer;
        margin-left: 10px; 
    }

    .auth-buttons { 
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .auth-buttons .btn-entrar {
        background-color: transparent;
        color: #fff;
        border: 1px solid #fff;
        padding: 8px 15px;
        border-radius: 6px;
        font-weight: bold;
        cursor: pointer;
    }

    .auth-buttons .btn-registrar {
        background-color: #4CAF50; /* Verde */
        color: #fff;
        border: none;
        padding: 8px 15px;
        border-radius: 6px;
        font-weight: bold;
        cursor: pointer;
    }

    .auth-buttons .gift-icon-btn { /* Para el botón con icono de regalo */
        background-color: #ff5722; /* Naranja */
        width: 35px;
        height: 35px;
        border-radius: 6px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        border: none;
        /* Si es un SVG, asegúrate de que el SVG sea blanco */
    }

    .layout-bc.is-home-page:not(.casino-lock-scroll) {
        background-image: linear-gradient(
            to bottom,
            var(--hero) 70px,
            rgba(var(--hero-rgb), 0)
            );
        background-repeat: repeat-x;
        background-position: 0 0;
        background-size: 100% 600px;
    }

    .is-home-page .hm-row-bc.has-slider:first-child {
        mask-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgb(0, 0, 0) 40%);
        margin-bottom: 0%;
    }


    /* Contenedor principal del carrusel */
    .carouselX {
        position: relative;
        width: 100%; /* O un ancho fijo, ej. 800px */
        max-width: 1200px; /* Ancho máximo */
        margin: 20px auto; /* Centrar el carrusel */
        overflow: hidden; /* Oculta los slides que están fuera del viewport */
        border-radius: 8px; /* Bordes redondeados */
        box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* Sombra sutil */
    }

    /* Indicador de contador (ej. "1 / 6") */
    .carousel-countx {
        position: absolute;
        top: 10px;
        right: 10px;
        background-color: rgba(0,0,0,0.6);
        color: white;
        padding: 5px 10px;
        border-radius: 5px;
        font-size: 0.9em;
        z-index: 10; /* Asegura que esté por encima de las imágenes */
    }

    /* El área visible donde se muestran las imágenes */
    .carousel-viewportx {
        width: 100%;
        overflow: hidden; /* Esto es clave para que solo se vea un slide a la vez */
    }

    /* El contenedor de todos los slides que se va a mover */
    .carousel-containerx {
        display: flex; /* Para que los slides se coloquen uno al lado del otro */
        transition: transform 0.5s ease-in-out; /* Transición suave para el movimiento */
        /* El "transform" inicial lo manejará JavaScript */
    }

    /* Cada slide individual del carrusel */
    .carousel-slidex {
        min-width: 100%; /* Cada slide ocupa el 100% del ancho del viewport */
        flex-shrink: 0; /* Evita que los slides se encojan */
        /* Los "width" y "left" en línea de tu HTML podrían ser redundantes
           si usas flexbox y min-width: 100% */
    }

    .carousel-slide img.sdr-image-bcx {
        width: 100%;
        height: auto;
        display: block; /* Elimina espacio extra debajo de la imagen */
        border-radius: 8px; /* Si quieres que las imágenes también tengan bordes redondeados */
    }

    /* Contenedor de los puntos de navegación */
    .carousel-dots {
        position: absolute;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%); /* Centrar los puntos */
        display: flex;
        gap: 8px; /* Espacio entre los puntos */
        z-index: 10;
    }

    /* Estilo de cada punto individual */
    .carousel-dot-item {
        width: 10px;
        height: 10px;
        background-color: rgba(255,255,255,0.5); /* Puntos inactivos */
        border-radius: 50%; /* Hacerlos circulares */
        cursor: pointer;
        transition: background-color 0.3s ease;
    }

    /* Estilo del punto activo */
    .carousel-dot-item.active {
        background-color: #fff; /* Punto activo, más brillante */
    }

    .carousel-count-arrow-container {
        display: flex !important;
    }

    .is-home-page .hm-row-bc:nth-child(1) .carousel-dots {
        left: 50% !important;
    }

    .games-horiz-scroll .casino-game-item {
        min-width: 134px !important;
    }

    .games-horiz-scroll {
        overflow-x: scroll;
    }

    .games-horiz-top-10 .games-horiz-scroll {
        overflow-x: hidden;
        overflow-y: hidden;
        margin-left: 50px;
    }




    /* nuevo */

    .games-horiz-scroll {
      /*  max-width: 90% !important; */
        max-width: 97% !important;
    }


    .games-horiz-scroll {
        flex: 1; /* Permite que este contenedor ocupe el espacio disponible */
        overflow-x: auto; /* Habilita el desplazamiento horizontal */
        scroll-behavior: smooth;
        white-space: nowrap; /* Evita que los juegos se envuelvan a la siguiente fila */

        /* Oculta la barra de desplazamiento visual */
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .games-horiz-scroll::-webkit-scrollbar {
        display: none;
    }

    .scroll-btn {
        transform: translateY(-50%);
        background: rgba(0, 0, 0, 0.6);
        color: white;
        border: none;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        cursor: pointer;
        z-index: 10;
    }



    /* Este contenedor va alrededor de todo tu carrusel (el título, el carrusel y las flechas) */





    .games-horiz-top-10 {
        position: relative; /* ESTO ES CRÍTICO */
        /* Otros estilos para el contenedor del carrusel */
    }


    .games-horiz-top-10 {
        position: relative;
        padding: 0 40px; /* Ajusta este valor para el espacio deseado desde los bordes del carrusel */
        /* Asegúrate de que este contenedor no tenga un width: 100% que lo fuerce a estar pegado a los bordes */
    }

    /* Los botones de scroll */
    .scroll-btn-left {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10;
        margin-left: 8px;
    }


    /* Los botones de scroll */
    .scroll-btn-right {
        position: relative;
        top: -100px;
        transform: translateY(-50%);
        z-index: 10;
        left: 95%;
    }

    .scroll-btn-left {
        left: 0;
    }

    .scroll-btn-right {
        right: 0;
    }

    /* El contenedor interno que realmente se desplaza */
    #games-horiz-scroll {
        overflow-x: auto;
        white-space: nowrap;
    }





    /* reglas para carrusel doble */ 


    /* Este selector apunta solo a los botones dentro de la estructura de doble fila. */
    .games-horiz-double-row .scroll-btn-left,
    .games-horiz-double-row .scroll-btn-right {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10;
        background-color: rgba(0, 0, 0, 0.5); /* Fondo semitransparente para visibilidad. */
        color: #fff; /* Color de las flechas. */
        border: none;
        border-radius: 50%;
        padding: 10px;
        cursor: pointer;
        transition: background-color 0.3s;
    }

    .games-horiz-double-row .scroll-btn-left {
        left: 0;
    }

    .games-horiz-double-row .scroll-btn-right {
        right: 0;
    }

    .games-horiz-double-row .games-carousel-container {
        padding: 10px;
        border-radius: 8px;
        position: relative; 
    }

    .games-horiz-double-row .games-horiz-scroll {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        gap: 10px;
        mask-image: linear-gradient(
            to right,
            transparent 0%,
            black 5%,
            black 95%,
            transparent 100%
            );
        -webkit-mask-image: linear-gradient(
            to right,
            transparent 0%,
            black 5%,
            black 95%,
            transparent 100%
            );
    }

    .games-horiz-double-row .carousel-row {
        display: flex;
        gap: 15px;
        width: max-content;
        height: auto;
    }

    .games-horiz-double-row .casino-game-item-content {
        flex-shrink: 0;
    }


    .games-horiz-double-row .casino-game-item-content {
        width: 170px;
    }


    .games-horiz-double-row #div-games-scroll{
        grid-template-rows: auto; 
        padding: 0 20px !important; 
        margin-left: 50px;
    }

    /* reglas del carrusel doble con 1 */

    .games-carousel-double-one {
        position: relative;
        padding-bottom: 20px; 
    }


    .games-carousel-double-one .games-carousel-container {
        padding: 0px 10px;
        border-radius: 10px;
        position: relative;
    }

    .games-carousel-double-one .games-horiz-scroll {
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
        gap: 15px; 
        mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
        -webkit-mask-image: linear-gradient(to right, transparent 0%, black 3%, black 95%, transparent 100%);
    }

    .games-carousel-double-one .large-item-container {
        flex-shrink: 0;
    }


    .games-carousel-double-one .casino-game-item-content-large {
        width: 250px;
        height: calc(136px * 2 + 10px); 
    }

    .games-carousel-double-one .small-items-wrapper {
        display: flex;
        flex-direction: column;
        gap: 10px; 
        flex-shrink: 0;
    }

    .games-carousel-double-one .carousel-row {
        display: flex;
        gap: 15px; 
        width: 0;
    }

    .games-carousel-double-one .casino-game-item-content {
        flex-shrink: 0;
        width: 120px;
        height: 136px;
    }

    .games-carousel-double-one .scroll-btn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10;
        background-color: rgba(0, 0, 0, 0.5);
        color: #fff;
        border: none;
        border-radius: 50%;
        padding: 10px;
        cursor: pointer;
        transition: background-color 0.3s;
    }

    .games-carousel-double-one .scroll-btn-left {
        left: 0;
    }

    .games-carousel-double-one .scroll-btn-right {
        right: 0;
    }

    .firstBigItem{
        min-width: 110px !important;
    }

    .firstBigItem-img{
        aspect-ratio: 2.2/4 !important;
        height: 265px !important;
    }

    .games-carousel-double-one #div-games-scroll-doble1{
        margin-left: 24px;
    }

    .games-carousel-double-one .wraper-doble1{
        margin-left: 10px;
    }

    .games-carousel-double-one .games-horiz-scroll .casino-game-item {
        min-width: 123px !important;
    }


    .games-carousel-double-one .firstBigItem-item-game{
        width: 300px;
    }


    .games-carousel-double-one .casino-game-item-image-wrapper{
        max-width: 250px;
    }


    .games-carousel-double-one  .games-horiz-scroll {
        max-width: 94% !important;
    }

    .games-carousel-double-one .wraper-doble1{
        margin-left: -13px !important;
        margin-bottom: -19px !important;
    }

    .games-carousel-double-one .white-space1{
        margin-top: 34px !important;
    }

    .games-carousel-double-one .firstBigItem-img{
        height: 299px !important;
    }



    /* caruusel ancho */


    .carrusel-ancho .games-carousel-container {
        position: relative;
    }


    .carrusel-ancho .scroll-btn-new {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        border: none;
        cursor: pointer;
        padding: 10px;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 10;
        transition: background-color 0.3s ease, box-shadow 0.3s ease;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
    }

    .scroll-btn-new {
        background-color: #000; 
    }

    .scroll-btn-new svg {
        color: #EEE !important;
    }

    .carrusel-ancho .scroll-btn-left {
        left: 10px;
    }

    .carrusel-ancho .scroll-btn-right {
        right: 10px;
    }


    .carrusel-ancho .games-horiz-scroll{
        margin-left: 65px;
        margin-bottom: -30px;
    }
    .carrusel-ancho .games-carousel-container{
        border-radius: 8px;
        padding: 20px 0px 40px;
    }

    .carrusel-ancho .letra-titulo{
        margin-top: 7px;
        margin-bottom: -1px;
        text-align: center;
    }

    .carrusel-ancho .casino-game-item-image-wrapper {
        margin-bottom: 0px !important;
    }

    .div-casino-live .carrusel-ancho .letra-titulo{
        margin-left: 25px; 
    }

    /* Carrsusel alto */ 

    .carrusel-alto .games-carousel-container {
        position: relative;
    }

    .carrusel-alto .scroll-btn-new {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background-color: rgba(255, 255, 255, 0.7);
        border: none;
        cursor: pointer;
        padding: 6px;
        border-radius: 50%; 
        width: 34px;
        height: 34px;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 10;
        transition: background-color 0.3s ease, box-shadow 0.3s ease;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    .carrusel-alto .scroll-btn-new:hover {
        background-color: rgba(255, 255, 255, 0.9);
        box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2);
    }

    .carrusel-alto .scroll-btn-new svg {
        width: 24px;
        height: 24px;
        color: #FFF;
    }

    .carrusel-alto .scroll-btn-left {
        left: 10px;
        background: #000;
    }

    .carrusel-alto .scroll-btn-right {
        right: 10px;
        background: #000;
    }


    .carrusel-alto .games-horiz-scroll{
        /* margin-left: 65px;
         width: 89%; */
        margin-left: 10px;
        width: 97%;
    }

    .carrusel-alto .games-horiz .games-horiz-scroll {
        padding: 20px 7px !important;
    }

    .carrusel-alto .games-carousel-container {
        border-radius: 8px;
    }

    .letra-titulo-alto{
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 130px;
    }

    /* carrusel normal */

    .carrusel-normal .games-carousel-container {
        position: relative;
    }

    .carrusel-normal .scroll-btn-new {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        border: none;
        cursor: pointer;
        padding: 10px;
        border-radius: 50%; 
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 10;
        transition: background-color 0.3s ease, box-shadow 0.3s ease;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
    }

    .scroll-btn-new:hover {
        background-color: rgba(132, 132, 132, 0.9);
        box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2);
    }


    .carrusel-normal .scroll-btn-left {
        left: 10px;
    }

    .carrusel-normal .scroll-btn-right {
        right: 10px;
    }

    .carrusel-normal .games-horiz-scroll{
        margin-left: 65px;
    }

    .carrusel-normal .letra-titulo{
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 130px;
    }


    .white-space{
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 110px;
    }

    .modal-nav.prev {
        left: -60px;
        border-radius: 3px 0 0 3px;
    }

    .modal-nav.next {
        right: -60px;
        border-radius: 3px 0 0 3px;
    }

    .close-btn {
        position: relative;
        left: 100%;
        color: #f1f1f1;
        font-size: 40px;
        font-weight: bold;
        transition: 0.3s;
        cursor: pointer;
        float: right;
    }

    .carrusel-normal .games-horiz-scroll {
        gap: 30px !important;
        display: flex;
    }

    #div_carrusel_top .casino-game-item-content {
        min-width: 200px !important;
    }

    .carrusel-alto .letra-titulo.ellipsis {
        text-align: justify;
        margin-top: -13px;
        font-size: 12px;
        color: #ffffff;
        width: 140px;
    }

    .carrusel-doble .letra-titulo.ellipsis {
        text-align: justify;
        margin-top: -13px;
        font-size: 12px;
        color: #ffffff;
        width: 140px;
    }

    .carrusel-ancho .letra-titulo.ellipsis {
        text-align: justify;
        font-size: 12px;
        color: #ffffff;
        width: 140px;
    }

    .games-carousel-double-one .white-space {
        text-align: center;
        margin-top: 40px !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 70%;
        font-size: 12px;

    }

    .carrusel-doble1 .letra-titulo.ellipsis {
        text-align: justify;
        margin-top: -11px;
        font-size: 12px;
        color: #ffffff;
        width: 100%;
    }

    .carrusel-normal .letra-titulo.ellipsis {
        text-align: justify;
        font-size: 12px;
        color: #ffffff;
        width: 140px;
        margin-top: -14px;
    }

    .casino-game-item-image-bc {
        aspect-ratio: 4/4 !important;
    }

    #cerrarModalMoneda {
        background-color: #555;
        border: none;
        color: #fff;
        padding: 10px 20px;
        border-radius: 6px;
        cursor: pointer;
        font-size: 16px;
        width: 100%;
        margin-top: 10px;
    }

    #casino_games_list{
        /*  gap: 35px !important;  */
    }

    #central-navigation-tabs {
        flex-wrap: wrap; /* Por si hay muchas pestañas en pantallas pequeñas */
        gap: 5px;       /* Espacio entre botones */
    }

    /* Opcional: ajustar el tamaño de fuente si son muchos botones */
    .main-view-tab {
        font-size: 13px;
        padding: 8px 12px;
    }

}