html, body{
    margin: 0px;  
    /* EVITA QUE SE SELECCIONE TEXTO*/
    user-select: none;           /* Estándar */
    -webkit-user-select: none;   /* Chrome, Safari */
    -moz-user-select: none;      /* Firefox */
    -ms-user-select: none;       /* Internet Explorer */   

    -ms-overflow-style: none;  /* IE y Edge */
    scrollbar-width: none;     /* Firefox */

    --x: calc(2 * 1svh + 1svh);
    /*
    font-size: calc(0.6 * var(--x));  -- 30px
    font-size: calc(0.7 * var(--x));  -- 35px
    font-size: calc(1.1 * var(--x));  -- 50px
    font-size: calc(0.9 * var(--x));  -- 45px
    
    */
    background-color: black;

}

body::-webkit-scrollbar {
    display: none;             /* Chrome, Safari */
}

/*
#loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(192, 26, 36);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}
*/


#tapa-captcha{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(192, 26, 36);
    color: white;
    font-family: poppins;
    font-size: 40px;    
    justify-content: center;
    align-items: center;
    z-index: 10000;
} 

#tapa-pc{
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(192, 26, 36);
    color: white;
    font-family: poppins;
    font-size: 30px;    
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

.nav-contenedor {      
    display: fixed;  
    background-color: rgb(167, 26, 22);
    background-image: url('img/imagen_cuerpo.jpg');
    position:fixed;
    height: 7svh;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    opacity: 1; 
    z-index: 1000;   
}

#div-escudo{
    position: absolute;
    height: 100%;
    width: 100%;
}

#img-escudo{
    max-width: 100%;  /* La imagen no puede ser más ancha que su contenedor */
    max-height: 100%; /* La imagen no puede ser más alta que su contenedor */
    object-fit: contain; /* Mantiene las proporciones de la imagen */
}

.nav{  
    display: flex;
    justify-content: end;
    width: 90%;
    margin:0px;
}


.div-boton-menu-contenedor{
    display:none;
    position: absolute;
    background-color: black;
    width: 100%;
    top: 7svh;
    margin: 0px;
    opacity: 1;   
}

.boton-menu{
    display: none;
    background-color:transparent;
    width: auto;
    height: 100% ;
    border: solid;
    padding: 0px, 3px;
    opacity: 1;
}

#datos-usuario{
    display: flex;
    position: absolute;  
    top: 15px;
    right: 10px;
    height: 70%;
    justify-content: center;    /* Centrar horizontalmente */
    align-items:center;        /* Centrar verticalmente */ 
    padding-left:10px;
    padding-right:10px;   
    /*overflow: hidden; 
    border-radius: 50%;
    */
}

#foto-usuario{
    border: none;
    height: 100%;
    overflow: hidden; 
    border-radius: 50%;    
    object-fit: cover;
}

#div-firebase{
    display: flex;
    width: 20%;    
    right: 0px;
}

#div-google{
    display: flex;
    justify-content: center;  
    align-items: center;      
    padding-right: 10%;
}

#img-google{
    width: auto;
    height: 60%;
}

#div-notificacion{
    display: flex;
    justify-content: center;  
    align-items: center;
    padding-right: 10%;      
}

#img-notificacion{
    width: auto;
    height: 60%;
}

.boton-img{
    height: 80% ;
}

.div-menu-contenedor{
    display: block;
    background-color:black;  
    position: absolute;
    top: 7svh; 
    width: 100%;   
    opacity: 1;
}

.ul-menu{
    display: flex;
    background-color: black;
    list-style: none; /* para que no muestre las viñetas  */  
    justify-content: center;    
    width: 100%;
    padding: 0px;
    margin: 0px;
    border: 0px;
    opacity:1;
}

.li-menu-item{
    background-color: black;
    display: flex;
    font-family: poppins;   
    color: white;    
    width: 100%;
    height: 40px;     
    padding: 0px 25px;
    justify-content: center;  /* Centra el contenido horizontalmente */
    align-items: center;      /* Centra el contenido verticalmente */
    opacity: 1;
}

.li-menu-item:hover{
    background-color: rgb(35, 35, 35) ;
}

#li-menu-campeonatos{
    display: none;
}

.ul-submenu-categorias,
.ul-submenu-campeonatos{
    display: block;
    flex-direction: column;
    color: inherit;
    justify-content: center;
    padding: 0px;
    margin: 0px;
    border: 0px;     
    transition: height 0.4s, max-height 0.4s;   
    height: 0px;
}

.li-submenu-categorias-item,
.li-submenu-campeonatos-item{
    display: flex;
    text-align: center;
    background-color: rgb(35, 35, 35);
    color: rgb(256, 256, 256);
    list-style: none; /* para que no muestre las viñetas  */
    font-family: poppins;
    height: 40px;
    width: 100%;   
    justify-content: center;
    align-items: center;
}

.li-submenu-categorias-item:hover{
    background-color: rgb(60, 60, 60) ;
}

.grid{
    display: grid;
    width: 100%;    
    height: 100%;
    background-color: rgb(94, 5, 5);
    grid-template-columns: 55% 45%;
    grid-template-rows: 40% 30% 30%;
    opacity: 1;
    margin: 0px;
    border: 0px;
}

.grid-item:first-child{
    grid-column: 1/span 2;
    grid-row: 1/span 1;
}

#div-tabla{
    grid-column: 2/span 1;
    grid-row: 2/span 2;    
}

#modal{
    background-color: blue;
}

.principal{
    position: absolute;
    background-color: rgb(92, 6, 6);
    width: 100%;
    top: 14svh;
    height: 86svh;
    z-index: 0;
    padding: 0px;
    margin: 0px;
    border: 0px;   
    transition: none;
    opacity: 1;
}

/********** PROXIMO PARTIDO *********************************************/

#div-proximo{
    padding: 10px;
}

#proximo{
    display: block;
    border-radius: 15px;
    border-top: 15px solid rgba(255, 255, 255, 1);
    border-bottom: 15px solid rgba(255, 255, 255, 1);
    align-items: center;
    height: 100%;
    box-sizing: border-box;
}

#titulo-proximo{
    color: rgba(255, 255, 255, 1);
    font-family: poppins;
    font-size: calc(0.6 * var(--x));
    text-align: center;
    width: 100%;
    height: 11%;
    overflow: hidden;
    text-align: center;
    justify-content: center;
    align-items: center;
}

#escudos-proximo{
    display: flex;
    height: 25%;  
    justify-content: center;
    align-items: center;    
}

#div-escudo-izq{
    display: flex;  
    height: 70%;
    width: 50%;
    justify-content: center;
    align-items: center;
}

#div-escudo-der{
    display: flex;
    height: 70%;
    width: 50%;    
    justify-content: center;
    align-items: center;    
}

#escudo-izq{
    height: 100%;
}

#escudo-der{   
    height: 100%;
}


#div-partido{
    width: 100%;
    height: 64%;
    background-color: rgba(255, 255, 255, 0.2);
    font-family: poppins;       
    color: white;
    justify-content: center;
    align-items: center;       
}

.etiqueta-partido{
    width: 100%;
    font-size: calc(0.5 * var(--x));
    text-align: center;
    height: 16.7%;            
    justify-content: center;
    align-items: center;       
}

.partido{
    display: flex;
    width: 100%;    
    font-size: calc(0.5 * var(--x));
    text-align: center;    
    height: 16.7%;    
    justify-content: center;
    align-items: center;       
}

#tabla{
    position: relative;
    left: 2.5%;
    height: 95%;
    width: 95%;
    display: grid;
    grid-template-columns: 70% 15% 15%;
    grid-template-rows: repeat(21, 1fr); /* 21 filas con la misma algura que se adatpan al alto del contenedor*/
    height: 100%;
    font-size: calc(0.5 * var(--x));
    font-family: poppins;     
    color: white;
    box-sizing: border-box;
    box-shadow: 5px 5px 40px white;
    border-radius: 10px;
    overflow: hidden;
}

#tabla > .tabla-item-impar,
#tabla > .tabla-pj-impar,
#tabla > .tabla-puntos-impar{
    background-color: rgba(255, 255, 255, 0.2); 
    display: flex;
    align-items: center;    
}

#tabla > .tabla-item-impar,
#tabla > .tabla-item-par{
    padding-left: 10px;
}


#titulo-tabla{  
    display: flex;
    align-items: center;   
    justify-content: center;   
    grid-column: 1/span 3;
    grid-row: 1/span 1;    
}

#tipo-tabla{
    display: flex;
    align-items: center;
    justify-content: center;       
    grid-column: 1/span 3;
    grid-row: 2/span 1;    
}

.tabla-pj-par,
.tabla-pj-impar,
.tabla-puntos-par,
.tabla-puntos-impar{
    display: flex;
    align-items: center;
    justify-content: center;   
}

/******* RESULTADOS **********************************************************/

#div-resultados{
    padding: 10px 20px 20px 20px;
    box-sizing: border-box;
}

#resultados{
    display: block;
    background-image: url("img/escudo-resultados.png");
    background-size: cover;  /* Ajusta la imagen para que cubra todo el div */
    background-position: center; /* Centra la imagen */    
    background-repeat: no-repeat;
    height: 100%;
    border: 2px solid black;
    box-shadow: 5px 5px 40px white;
    border-radius: 15px;
    box-sizing: border-box;
}

#titulo-resultados{
    display: flex;
    text-align: center;
    height: 10%;
    color: rgba(255, 255, 255, 1);
    font-family: poppins;
    font-size: calc(0.6 * var(--x));   
    justify-content: center;
    align-items: center;    
}

#escudos-resultados{
    display: flex;
    height: 20%;
    justify-content: center;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.2);    
}

#espacio-resultados{
    height: 100%;
    width: 40%;
}

#div-escudo-resultados-izq{
    display: flex;  
    height: 80%;
    width: 30%;
    justify-content: center;
    align-items: center;
}

#div-escudo-resultados-der{
    display: flex;
    height: 80%;
    width: 30%;    
    justify-content: center;
    align-items: center;    
}

#escudo-resultados-izq{
    height: 100%;
}

#escudo-resultados-der{   
    height: 100%;
}

#grid-resultado-partidos{
    display: grid;
    height: 70%;    
    width: 100%;
    grid-template-columns: 40% 30% 30%;
    grid-template-rows: auto auto auto auto auto;
    font-family: poppins; 
    font-size: calc(0.6 * var(--x));
    color: white;
    justify-content: center;
    align-items: center;
    text-align: center;
}

@keyframes plantel{
    from { transform: translateX(100%); }
    to { transform: translateX(10%); }
}

@media (max-width: 1000px) {

    #tapa-pc {
        display: none;
    }

    .nav-contenedor {        
        align-items: self-end;
        height: 7svh;
        margin:0px;                
    } 

    .div-boton-menu-contenedor{
        display:flex;
        height: 7svh;
        justify-content: space-between; 
    }


    .div-menu-contenedor{
        top: 7svh; 
    }

    .ul-menu{
        flex-direction: column;
        position:fixed;
        top: 14svh;
        right:0px;
        width: 100%; 
        margin:0px;    
    }
    

    .li-menu-item{             
        padding: 0px;
        width:100%;
        text-align:center;  
        font-size: calc(1.1 * var(--x));  
        height: 9svh;                    
    }
    
    .li-menu-item:hover{
        opacity: 1;
    }   
    

    .li-submenu-categorias-item,
    .li-submenu-campeonatos-item{
        font-size: calc(0.9 * var(--x));  
        height: 7svh;
    }


    .boton-menu{  
        display: block;      
    }
    
    .principal{
        height: 86svh;
    }

    .li-submenu-campeonatos-item-temporada,
    .li-submenu-campeonatos-item-campeonato{
        display: none;
    }

}

.onesignal-bell-svg{
    zoom: 2.0;
}

.onesignal-bell-container{
    zoom: 2.0;
}

.popup-conf{
    z-index: 100000;
    border: 3px solid white;
    border-radius: 30px;
    background-color: rgb(94, 5, 5);
    box-shadow: 5px 5px 40px white;
}

.icono-conf{
    font-size: 30px;  
    background-color: rgb(94, 5, 5);
    color: white !important;
    border-color: white !important;
}

.titulo-conf{
    font-size: 35px;    
    font-family: poppins;
}

.boton-conf{
    font-size: 40px;
    background-color: rgba(255, 255, 255, 0.2);
    padding: 15% 100% 15% 100%;    
}

.boton-conf:hover{
    box-shadow: 5px 5px 40px white;
}

.icono-conf .swal2-success-ring {
    border-color: white !important;
}

.img-conf{
    width: 18%;  /* Cambia el ancho */
    height: auto; /* Cambia el alto */
}

.icono-conf .swal2-success-line-tip,
.icono-conf .swal2-success-line-long{
    background-color: white !important;
}

#btn-captcha-v2 {
    display: none;
}

#politicas-google{
    position: relative;
    color: white;
    font-size: calc(0.5 * var(--x));
    text-align: center; 
    font-family: poppins;
    padding: 20px;
}

.grecaptcha-badge {
    visibility: hidden;
}