/* Variables */

:root {
	--tiempoAnimacion: 0.3s;		/*  Velocidad de teclas */
	--tiempoAnimacionPopup: 0.1s;	/*  Velocidad de desplazamiento del popup */
	--tiempoAleatorioNumero: 2s;
}

/* Global */


body {
/*    background-color: #e0ac9d;   */
/*	background-color: #E1F4EE; 		*/	/*	este es el color de fondo verde clarito */
	background-color: white ;

}

#cajon_banner_inf {
/*    background-color: #e0ac9d;   */
/*	background-color: #E1F4EE;			este es el color de fondo verde clarito */
    width: clamp(100%, 100%, 700px); 
    max-width: 700px;
}

.center {
	text-align: center;
}



.clase_overscroll {
    overscroll-behavior: contain;	
}



.class_body {
    overscroll-behavior: contain;  
    overflow : hidden;
}

.fb-like {
	z-index: 5;
}



#contenedor_padre {
	position: relative;
    clear:both;
/*    width: 100%; */
    max-width: 700px;
	margin: 0 auto;
	justify-content: center;	
	z-index:2;
}

#contenedor_central   {
/*	background-color: #E1F4EE;			este es el color de fondo verde clarito */
	width : 100%;
	position:relative;
	max-width: 700px ;
	margin: 0 auto;
	justify-content: center;	
}

#contenedor_begin   {
    background: #ccf4e8

/*    background: #93dbc5; */

/*  background: #E1F4EE; */
/*	background: silver; */
	opacity : 55%;
	width : 100%;
	height: 550px; 

	position:relative;
	margin: 0 auto;
	margin-top: 0px;
	margin-bottom : 0px;
	justify-content: center;
	overflow: auto;
	z-index:2;	
}

#animacionNumeros2 {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 550px; 
	overflow: hidden;
	z-index: 1;
}


.tabla_stat  .fondos_header_stat {
    text-align: center;
}


.tabla_stat thead  {
/*    background: #93dbc5;  este es el verde claro anterior  */
    position : sticky ;
    top : 0;
    z-index: 5;
}

#tb_fila1  {
    position : sticky ;
    top : 0;
    z-index: 5; 
}


.tabla_stat  .fila_titulo {
	border-bottom: 2px solid black;
	border-collapse: separate ;
	border-spacing: 0;
}

.color_azul {
    color:blue;
    font-weight: 600;
}

.color_rojo {
    color:red;
    font-weight: 600;
}



@media only screen and (max-height: 900px) {
	#contenedor_begin   {
		height : 500px; 
	}
	#animacionNumeros2 {
		height: 500px; 
	}
}



@media only screen and (max-height: 800px) {
	#contenedor_begin   {
		height : 400px;  
	}
	#animacionNumeros2 {
		height: 400px; 
	}
}

@media only screen and (max-height: 600px) {
	#contenedor_begin   {
		height : 350px; 
	}
	#animacionNumeros2 {
		height: 350px; 
	}
}

/***/

i.botonesPrincipales {
    color: #4D9DE0 !important;
}

i.botonesPrincipalesBlink {
    color: #ee4a02 !important;
}

i.botonesPrincipales:hover {
    color: #1d598b !important;
}


i.botonesPrincipales.botonesPrincipalesDisabled {
    color: #b5ddff !important;
}




/*CHR
#contenedor_inicio {
    width: clamp(100%, 100%, 700px);
    max-width: 700px;
	position: relative; 
    background: linear-gradient(221deg, #e0ac9d, #ffc1b0, #e1795c);
    background-size: 600% 600%;
    -webkit-animation: fondoGradiente 4s ease infinite;
    -moz-animation: fondoGradiente 4s ease infinite;
    -o-animation: fondoGradiente 4s ease infinite;
    animation: fondoGradiente 4s ease infinite;
}
*/ 

@-webkit-keyframes fondoGradiente {
    0%{background-position:99% 0%}
    50%{background-position:2% 100%}
    100%{background-position:99% 0%}
}
@-moz-keyframes fondoGradiente {
    0%{background-position:99% 0%}
    50%{background-position:2% 100%}
    100%{background-position:99% 0%}
}
@-o-keyframes fondoGradiente {
    0%{background-position:99% 0%}
    50%{background-position:2% 100%}
    100%{background-position:99% 0%}
}
@keyframes fondoGradiente {
    0%{background-position:99% 0%}
    50%{background-position:2% 100%}
    100%{background-position:99% 0%}
}

/*CHR
#contenedor_inicio .row div {
	margin: 10px 0;
}
*/

/* Estilo CSS para la etiqueta roja */
.new-indicator {
    color: white; /* Color del texto */
    background-color: red; /* Fondo rojo para simular el botón */
    font-size: 0.7em; /* Letra más pequeña que el texto principal */
    font-weight: bold;
    padding: 2px 4px;
    border-radius: 4px; /* Bordes ligeramente redondeados */
    margin-left: 5px;
    line-height: 1; /* Asegura que el texto y el fondo coincidan */
}


.box-pantalla-inicio {
	align-items: center;
	 height:30vh; 

}

.sudoku-title  {
	color:brown;
	font-size: 40px;
}

#gameTitle {
    color: #4D9DE0;
	font-size: 1.4em;
	align-items: center;
	vertical-align: center;
	cursor:pointer;
}

div#headerLogo {

	width: 385px;
    height: auto;
    display: flex; 
/*    align-items: center; */
/*    justify-content: space-between;*/
    margin: 0 auto   ;
    text-align: center;
    padding: 2px 0px 2px;
/*    border-radius: 0 0 10px 10px; */
/*    box-shadow: 0 0 5px rgba(0,0,0,0.2); */

    background: rgba(255, 255, 255, 0.9);
}

#headerLogo_home  {
    width: 50%;
	line-height: 1.0;
    margin-bottom: 0px;

}

#headerLogo_home h1  {
	text-align: left;
	line-height: 1.0;
    margin-left: 15px;
    text-transform: uppercase;
    font-size: 0.7em;
    font-weight: 500;
    color: #5AC4A4;
    margin-bottom: 0px;
}

#headerLogo_user  {
    width: 50%;
	line-height: 1.0;
    margin-bottom: 0px;
    cursor:pointer;

}

#headerLogo_user h1  {
	text-align: right;
	line-height: 1.0;
    margin-right: 15px;
    margin-bottom: 0px;
    font-size: 0.7em;
    font-weight: 500;
    color: #5AC4A4;
}

#play_beginner {
	font-family : "Verdana";
}

#play_classic {
	font-family : "Verdana";
}

#play_advanced {
	font-family : "Verdana";
}

.align-items-center div p {
    margin-bottom: 0;
}


#herramientas {
	width : 100vw;
	margin: 0 auto;
	background-color: #e0bc9d;
	display: none;
}

.boton_menu_instr {
	font-size: 3vw !important;
	letter-spacing: 0px !important;
	margin-left : 1px !important; 
	margin-right : 1px !important;
	margin-top : 20px !important; 
	margin-bottom : 20px !important;
	padding-left : 2px !important; 
	padding-right : 2px !important;
	padding-top : 3px !important; 
	padding-bottom : 3px !tant;

}

.botones {
	margin-top: 8px;
	margin-right: 4px;
	background-color : lightblue ;
	text-align: center;
	border-radius: 10%;
}

.botones2 {
	margin-top: 8px;
	margin-right: 4px;
	background-color : white ;
	text-align: center;
	border-radius: 10%;
}

.botones_welcome {
	width: 20%;
	font-size: 4vw
	margin-top: 2px;
	padding-left  : 5px;
	padding-right : 5px; 
	padding-top : 3px;
	padding-bottom : 3px;
	margin-right: 8px;
	margin-left: 8px;
	background-color : #b3f3df ;
	text-align: center;
	border-radius: 10px;
}

.teclas {
	margin-top: 15px;
	margin-right: 3px;
	width: 22px;
	height:22px;
	background-color : lightgreen ;
	text-align: center;
	border-radius: 10%;
	font-size: 18px;

}



#separador {
	width: 100%;
	height : 3px;
	margin: 0 auto;
	background-color :brown ;
	margin-bottom: 10px;
	margin-top: 10px;
}


#img_tab {
	width: 65%;
	margin: 0 auto;
	background: orange;
	outline:10px orange;
}

.cell {
	width: 20px ;
	height:20px; 
	border: 1px solid #484a47;
	border-collapse: collapse;
	background-color : lightyellow ;
	text-align:center;	
}

/*CHR
#contenedor_welcome {
    width: clamp(100%, 100%, 700px); 
    display : none;
    max-width: 700px;
	margin: 0 auto;
	background-color: #ffcc80; 
	position: relative;
	overflow: hidden;
    display: flex ; 
    flex-direction: column; 
    justify-content: center ; 
}
*/

#contenedor_opciones {
	margin: 10 auto;
	text-align: center;


}

.material-symbols-outlined {
          font-variation-settings:
          'FILL' 0,
          'wght' 700,
          'GRAD' 0,
          'opsz' 48;
          color: darkblue; 
          font-size: 40px; 
          background: transparent;
          pointer-events: none; 
		  overflow: hidden;
}



/* _____________________________________________POPUP informativo  ______________________________________________________*/


.w-overlay-info, .w-overlay-inter, .w-overlay-cierre {
	background : rgba(0,0,0,0.4);
	position: absolute;
	top : 0;
	bottom : 0;
	left : 0;
	right : 0;
	display: flex;
/*	align-items: center; */
	align-items: start;
	justify-content: center;
	visibility: hidden;
}


.w-overlay-info.w-active-info ,.w-overlay-inter.w-active-inter, .w-overlay-cierre.w-active-cierre {
	z-index: 15;
	visibility: visible ;
}

.w-popup-info {
	background : #f8f8f8; 
	box-shadow : 0px 0px 10px 0px rgba(0,0,0,0.6) ;
	border-radius: 10px; 
	font-family : 'Montserrat', sans-serif;
	padding : 10px;
	text-align : center;
	width : clamp(75%, 85%, 450px);
/*	height  : clamp(20%, 75%, 100px); /*  OJO es nuevo */
	opacity : 0;
	z-index: 10;
	margin-top: 15vh;
/*	margin-top:  300px; */
	visibility: hidden;
}


.w-popup-info h3 {
/*	font-size: min(4.2vw, 26px ); */
	font-size: min(6vw, 26px ); 
	font-weight: 600;
	margin-top: 10px;
	margin-bottom: 10px;
	opacity:1 ;
}

.w-popup-inter h3  {
/*	font-size: 1.7em; */
	padding-top: 0px;
	font-size: min(5vw, 26px ); 
	font-weight: 600;
	line-height: 1.0 !important; 
	margin-top: 0px;
	margin-bottom: 5px;
	opacity:1 ;
}

.w-popup-cierre h3, .w-popup-cierre h2  {
/*	font-size: 1.7em; */
	font-size: min(7vw, 36px ); 
	font-weight: 800;
	margin-top: 5px;
	margin-bottom: 5px;
	opacity:1 ;

}

/* URL : https://www.cssportal.com/css3-text-shadow-generator/    Sirve para CSS Text Shadow Generator */
/*	text-shadow: 2px -2px 3px rgba(0, 0, 0, 1) !important; */

.w-popup-info h4   {
/*	font-size: 1.7em; */
	font-size: min(4.5vw, 20px ); 
	font-weight: 400;
	margin-top: 10px;
	margin-bottom: 10px;
	opacity:1 ;
	padding-x : 20px;
}

.w-popup-inter h4   {
	font-size: min(4.5vw, 20px ); 
	font-weight: 400;
	margin-top: 5px;
	margin-bottom: 5px;
	opacity:1 ;
}

.w-popup-cierre h4  {
/*	font-size: 1.7em; */
	font-size: min(5vw, 26px ); 
	font-weight: 600;
	margin-top: 5px;
	margin-bottom: 5px;
	opacity:1 ;
}



.w-popup-inter p,  {
	font-size : min(2.5vw , 14px);
	color: black !important;
}

#w-parrafo-inter {
	font-size : min(3.6vw , 16px);
	color: black !important;
	padding-left: 30px;
	padding-right: 30px;
}

.w-popup-info.w-active-info {
	z-index: 15;
}


 .w-popup-info.w-active-info  		{ animation : entradaPopup 0.2s ease 0.2s forwards; } /* 1o tiempo es duracion animación, 2o es tiempo antes de animar  */
 .w-popup-info.w-active-info h3  	{ animation : entradaTexto 0.2s ease 0.2s forwards; } 
 .w-popup-info.w-active-info h4  	{ animation : entradaTexto 0.2s ease 0.2s forwards; } 


@keyframes entradaPopup {
	from { 	transform : translateY(+100px); opacity:0; visibility:hidden;	}
	to 	{	transform : translateY(-100px); opacity:1; 	visibility:visible;}
}


@keyframes entradaTexto {
	from { 	opacity : 0.4;	}
	to 	{	opacity : 1;	}
}


/* ________________________________________  POPUP Interactivo  _____________________________________________________*/



.w-popup-inter {
	background : #f8f8f8;
	box-shadow : 0px 0px 10px 0px rgba(0,0,0,0.6) ;
	border-radius: 10px;
	font-family : 'Montserrat', sans-serif;
	padding : 10px ;
	text-align : center;
	width : clamp(85%, 90%, 500px);
	opacity : 0;
	z-index: 15;
/*	margin-top: 15vh;*/
	margin-top: 10vh;
	transition: .3s ease all;
	transform: scale(0.7);
}

.w-popup-arriba {
	margin-top: 5vh !important;	
}

.w-popup-abajo  {
	margin-top: 18vh !important;	
}

#w-reloj-inter {
	font-size: 0.6em;
	line-height: 0.6em;
	display: block;
	text-align: right;
}

#cajon-boton-71-inter , #cajon-botones-OK-inter {
	height : min(5vh, 45px);
	display: flex;
    justify-content: center;
    align-items: center;
}

.w-popup-inter button {
	font-size: min(3vw, 18px); 
	font-weight: 300;
	margin-bottom: 15px;
	padding: 4px 25px 5px;
	color : #fff;
	background: #5E7DE3;

/*	background : silver; */
	opacity:0 ;
	border-radius: 5px;	
}



.w-popup-inter.w-active-inter {
	opacity : 1;
	transform: scale(1);
	z-index: 15;
	visibility: visible;
}


.w-popup-inter.w-active-inter h3 { animation : entradaTitulob .3s ease .2s forwards; } /* 1o tiempo es duracion animación, 2o es tiempo antes de animar  */
.w-popup-inter.w-active-inter h4 { animation : entradaLineab  .3s ease .2s forwards; }
.w-popup-inter.w-active-inter button { animation : entradaBotonb  .3s ease .2s forwards; }

@keyframes entradaTitulob {
	from { 	transform : translateY(-25px);
			opacity : 0;	}
	to 	{	transform : translateY(0px);
			opacity : 1;	}
}

@keyframes entradaLineab {
	from { 	transform : translateY(25px);
			opacity : 0;	}
	to 	{	transform : translateY(0px);
			opacity : 1;	}
}

@keyframes entradaBotonb {
	from { 	transform : translateY(25px);
			opacity : 0;	}
	to 	{	transform : translateY(0px);
			opacity : 1;	}
}

/* ________________________________________  POPUP Cierre  _____________________________________________________*/



.w-popup-cierre {
	width : clamp(90%, 90%, 600px) ;
/*	max-width: 450px;*/
	background : #f8f8f8;
	box-shadow : 0px 0px 10px 0px rgba(0,0,0,0.6) ;
	border-radius: 10px;
	font-family : 'Montserrat', sans-serif;
	padding : 10px ;
	text-align : center;
	opacity : 0;
	z-index: 15;
	margin-top: 3vh;
	transition: .5s ease all;
	transform: scale(0.7);
}

#w-reloj-cierre {
	font-size: 0.8em;
	line-height: 0.6em;
	display: block;
	text-align: right;
}


.w-popup-cierre h6 {
	font-size: 1.0em;
	font-weight: 200;
	margin-bottom: 4px;   
	opacity:0 ;	
}

.w-popup-cierre h5 {
	font-size: 1.2em;
	font-weight: 200;
	margin : 8px;   
	opacity:0 ;	
}

.w-popup-cierre   button {
	font-size: 30px; /*	antes 18 */
	font-weight: 500;
	margin: 12px;
	padding: 10px 25px 10px !important; /*	antes 9  */
	color : #fff;
	background: #5E7DE3;

/*	background : silver; */
	opacity:0 ;	
}


.tb_cierre {
	font-size: 12px;
	line-height: 0.7;
}

.tb_cierre   .tb_cierre_columna1 {
	font-family: Tahoma, Geneva, sans-serif;
	color:silver;
	padding-right: 10px;
}

.tb_cierre   .tb_cierre_columna2 {
	font-size: 10px;
/*	font-family: Webdings, sans-serif; */
	font-family: Tahoma, Geneva, sans-serif;
	letter-spacing: -1px;
	color:silver;

}


.tb_cierre tr:nth-of-type(1)  .tb_cierre_columna1 {
	padding-top: 10px;

}

.tb_cierre tr:nth-of-type(1)  .tb_cierre_columna2 {
	padding-top: 10px;

}

.tb_cierre tr:nth-last-of-type(1)  .tb_cierre_columna1 {
	padding-bottom: 15px;

}

.tb_cierre tr:nth-last-of-type(1)  .tb_cierre_columna2 {
	padding-bottom: 15px;	

}

.Boton_Compartir {
	width: 60%;
	font-size: 18px;
	line-height: 0.9;
	font-weight: 700;
    text-align: center;
    border-radius: 5px;
    cursor: pointer;
	color: #65685D;
    padding: 10px;
    margin: 5px;
    background: #CCFC4C !important;
    border: white 4px outset

}


.w-popup-cierre.w-active-cierre {
	opacity : 1;
	transform: scale(1);
	width : clamp(90%, 90%, 550px) ;
	z-index: 15;
	visibility: visible;

}


.w-popup-cierre form .w-inputs-cierre {
	display:inline-block;
	align-content: center;
	opacity: 0;
}

.w-popup-cierre form .w-inputs-cierre input   {
	width: 40%; 
	margin-bottom: 6px;
	height: 35px;
	line-height: 30px;
	font-size: 18px;
	text-align: center;
	border: 1px solid #BBBBBB;	
}
.w-popup-cierre form .w-inputs-cierre select   {
	width: 40%; 
	margin-bottom: 6px;
	height: 30px;
	line-height: 18px; /*	antes 22  */
	padding : 2px; /*	antes no había   */
	font-size: 18px;
	text-align: center;
	border: 1px solid #BBBBBB;	
}

#w-teams-cierre {
	width: 100%; 
	margin-bottom: 6px;
	height: 30px;
	line-height: 18px; /*	antes 22  */
	padding : 2px; /*	antes no había   */
	font-size: 18px;
	text-align: center;
	border: 1px solid #BBBBBB;		
}

.w-popup-cierre form .w-submit-cierre {
	padding: 6px 10px; /*	antes 0 y 15   */
	margin : 6px; /*	antes no había   */
/*	height: 20px; */
	line-height: 15px;
	border : none;
	color : #fff;
	background: #5E7DE3;
	border-radius: 10%;
	font-family: 'Montserrat', sans-serif;
	font-size: 18px;
	cursor:pointer;
	transition: .3s ease all;
	opacity:0;
}


.w-popup-cierre.w-active-cierre h3 { animation : entradaTituloc .4s ease .2s forwards; }  /* 1o tiempo es duracion animación, 2o es tiempo antes de animar  */
.w-popup-cierre.w-active-cierre h4 { animation : entradaLineac  .4s ease .2s forwards; }
.w-popup-cierre.w-active-cierre h5 { animation : entradaLineac  .4s ease .2s forwards; }
.w-popup-cierre.w-active-cierre h6 { animation : entradaLineac  .4s ease .2s forwards; }
.w-popup-cierre.w-active-cierre .w-inputs-cierre { animation : entradaInputs  .4s ease .2s forwards; }
.w-popup-cierre.w-active-cierre .Boton_Compartir   { animation : entradaInputs  .4s ease .2s forwards; }
.w-popup-cierre.w-active-cierre .w-submit-cierre { animation : entradaInputs  .4s ease .2s forwards; }

@keyframes entradaTituloc {
	from { 	transform : translateY(-25px);
			opacity : 0;	}
	to 	{	transform : translateY(0px);
			opacity : 1;	}
}

@keyframes entradaLineac {
	from { 	transform : translateY(25px);
			opacity : 0;	}
	to 	{	transform : translateY(0px);
			opacity : 1;	}
}

@keyframes entradaBotonc {
	from { 	transform : translateY(25px);
			opacity : 0;	}
	to 	{	transform : translateY(0px);
			opacity : 1;	}
}

@keyframes entradaInputs {
	from { 	opacity : 0;	}
	to 	{	opacity : 1;	}
}

/* ______________________POPUP FIN __________________________________*/


#contenedor_juego {
    width: clamp(100%, 100%, 700px); 
 /*   max-width: 700px; */
    height : clamp(90%, 90%, 750px); 
	margin: 0 auto;
	background-color: transparent;
	position: relative;
	overflow: hidden;
    display: flex ; /* solo esta linea, CÓDIGO NUEVO - CLASE 134 */
    flex-direction: column; /* solo esta linea, CÓDIGO NUEVO - CLASE 134 */
    justify-content: center ; /* solo esta linea, CÓDIGO NUEVO - CLASE 134 */
}



.not-scroll-container {
/*D 	liberamos esta linea  */
    height: var(--iphoneHeight) !important;
}



#body_efectivo {
    width: clamp(100%, 100%, 800px);
    max-width: 800px;
/*    height: 100vh; */		/*  SE AGREGA CON DEVELOPER  baja de 1600 a 800 */
    position : relative;
    margin: 0 auto;
/*	background-color: #e0ac9d; */
}


#cajon_banner_sup {
    width: clamp(100vw, 100vw, 700px);
    max-width: 700px;
	margin: 0 auto;
	background-color: white ;
	padding : 0;


}



.img_banner_up {
/*	width: min( 100vw , 500px );*/
	width: min( 100vw , 700px );

}

.img_banner_up2 {
/*	width: min( 100vw , 500px );*/
	width: min( 100vw , 700px );
}


.img_banner {
/*	width: min( 100vw , 500px );*/
	width: min( 100vw , 500px );

}

.img_banner_lat {
	width: min( 90vw , 300px );
}


#banner_sup1   {	
    margin: 0 auto;
}


#banner_sup2   {	
    margin: 0 auto;
}


#cajon_banner_inf {
/*    width: clamp(85vw, 85vw, 800px);
    max-width: 800px; */
/*    width: 100%; */
	margin: 0 auto;
/*	/// background-color: white ; */
	padding : 0;
	margin-top: 0px;
}


#banner_inf1 , #banner_inf2 , #banner_inf3 {	
    width: 450px  !important;
    margin: 5px auto; 
}


ins.adsbygoogle[data-ad-status="unfilled"]  {
    height: 50px  !important;
}



							a#toggleMenu {
							    cursor: pointer;
							}

						    div#gameMenu {
						        position: relative;
						        width: 385px;	
						        display : flex;
						        align-items: center;
						        justify-content: space-between;
						        margin: 0px auto ;		
						        padding: 0 5px 2px; /* 						        padding: 0 15px 2px; */
							    border-radius: 0 0 10px 10px;
							    background: rgba(255, 255, 255, 0.9);
							    z-index: 3;

						    }

						    div#gameMenuItems {
							    top: calc(50% + 50px);
							    left: calc(50% - 150px);
							    width: 300px; 
							    text-align: center;
							    height: 600px;		
							    overflow-x: hidden;
							    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5), 0 0 55px rgba(0, 0, 0, 0.5);
						    	z-index: 3;
							}

						    div#gameMenuItems {
						        display: none;
						        background: lightgrey;
						        color: brown;
						        position: absolute; 
						        text-align: center;
						    }

						    div#gameMenuItems ul {
							    background: #f4f4f4;
						        list-style: none;
						        margin-block-start: 10;
						        margin-block-end: 0;
						        padding-inline-start: 0;
						    }

							div#gameMenuItems li {
							    padding: 2px;					/* era 5px */
							    font-size: 12px;				/* no estaba */
							    border-bottom: 1px solid;
							    color: #383838;
							    cursor: pointer;
							}

						    div#gameMenuItems li:hover {
							    background: #e2e2e2;
							}
							div#gameMenuItems li.menuTitle {
							    background: #c7c7c7 !important;
							    text-transform: uppercase;
							    font-size: 12px;
							    color: brown;
							    font-weight: 500;
							    cursor: default;
							}

#menu {
	width : clamp(100%, 100%, 700px);
	height: auto;
	margin: 0 auto;
	padding: 5px 0;
	text-align: center;
}


#teclado {
    width: clamp(100%, 100%, 700px);
    height: auto;
    margin: 4px auto;
    margin-bottom: 5px;
	text-align: center;
}

#zona_inferior {
    height: auto;
	text-align: center;

    margin: 4px auto 4px auto;  /* baja de 10px a 5px */
    width: 385px;
    padding: 5px 12px; /* baja de 15px a 6px */
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.9);

	position:relative; 
	display:flex; 
	align-items: center; 
	justify-content: space-between;	

}

#teclado_aux {
	width : clamp(100%, 100%, 700px);
    margin: 10px 0;
    text-align: center;
}


a:visited { color: #484a47 ; text-decoration:none; }
a:link { color: #484a47 ; text-decoration:none; }


#caja-exterior {
	width: 382px ;
	height:398px;
	margin:0 auto;
	background-color : white ;

}

div#tablero {
    margin: 0 0 10px 0;
}


#tablero td {
	border: 1px solid #696969;
	border-collapse: collapse;
}

#tablero #tabla_con_bordes tr:nth-of-type(3n) {
	border-bottom : 3px solid #696969 ;				/*  Regiones remarcadas en grueso */
	border-collapse: collapse;
}

#tablero #tabla_con_bordes tr  td:nth-of-type(3n) {
	border-right : 3px solid #696969 ;				/*  Regiones remarcadas en grueso */
	border-collapse: collapse;
}


#tablero #tabla_sin_bordes tr:nth-of-type(3n) {
	border-bottom : 1px solid #696969 ;				/*  Regiones remarcadas en grueso */
	border-collapse: collapse;
}

#tablero #tabla_sin_bordes tr  td:nth-of-type(3n) {
	border-right : 1px solid #696969;				/*  Regiones remarcadas en grueso */
	border-collapse: collapse;
}


#tablero table  {
	border: 3px solid #696969 ;
	border-collapse: collapse;
	margin: 0 auto;

}



.celda  {
	width: 40px ;
	height:40px; 
	line-height:26px;   /*  NUEVO */
/*	background-color : white ;  */
/*	background-color : #fafafa ;  */
	vertical-align: middle; 
	font-size: 26px;
/*	color: grey ;	*/
	text-align:center;	
	cursor : pointer;
	padding:0px;
	margin:0px;
}




.celda.cl_bro_whi { color:brown !important; 	background-color: #fafafa 	 !important }
.celda.cl_gry_whi { color:brown !important ; 	background-color: #fafafa 	!important }
.celda.cl_whi_whi { color:brown !important ; 	background-color: #fafafa 	!important }


.celda.cl_bro_gry { color:brown !important; 	background-color: #e0e0e0  !important }

.celda.cl_gry_gre { color:blue !important ; 	background-color: #a5dffc   !important }	/* colores de highlight celda y numero */
.celda.cl_blu_gre { color:blue  !important; 	background-color: #a5dffc   !important }
.celda.cl_red_yel { color:blue !important ; 	background-color: #a5dffc   !important }


/*.celda.cl_bro_ora { color:brown !important; 	background-color: #4D9DE0  !important  }*/  /* probando fondo celda*/
.celda.cl_bro_ora { color:brown !important; 	background-color: #ffff00  !important  }
.celda.cl_gry_ora { color:brown !important ; 	background-color: #ffff00  !important }


.celda.cl_whi_red { color:white !important ; 	background-color: red !important }

.celda.cl_blu_yel { color:blue !important ; 	background-color: yellow !important }
.celda.cl_blu_ora { color:blue !important ; 	background-color: orange !important }

.celda.cl_bro_wr0 { color:brown !important ; 	background: rgba(255,0,0,1.0) !important }
.celda.cl_bro_wr1 { color:brown !important ; 	background: rgba(255, 0, 0, 0.5) !important }
.celda.cl_bro_wr2 { color:brown !important ; 	background: rgba(255, 0, 0, 0.25) !important }
.celda.cl_bro_wr3 { color:brown !important ; 	background: rgba(255, 0, 0, 0.125) !important }
.celda.cl_bro_wr4 { color:brown !important ; 	background: rgba(255, 0, 0, 0.06) !important }

.celda.cl_blu_blk { color:white !important ; 	background: black  !important } 


/*
.celda_highlight {
-webkit-animation:changecolor 1s ease 0s infinite normal;
-moz-animation:changecolor 1s ease 0s infinite normal;
-ms-animation:changecolor 1s ease 0s infinite normal;
animation:changecolor 1s ease 0s infinite normal;
}

@-webkit-keyframes changecolor {
0%{ background-color: yellow } 
100%{ background-color: red  } 
}

@keyframes changecolor {
0%{ background-color: yellow  }
100%{ background-color: red ; }
}
*/


.celda_highlight {
	background: yellow;
}

.gema {
	font-size: 21px;
	color : red;
	background: yellow;

}

.gemb {
	font-size: 16px;
	color : red;

}

.taza {
	padding-left: 35px;
	padding-right: 35px;
} 
/*    background-color: rgba(250, 14, 7 ,0.4);*/

button.boton-menu {
	margin-left: 1px;
	margin-right : 3px;
	min-height:30px;
	text-align: center;
	border-radius: 5px;
	cursor : pointer;
	color : black;
    background: #78CEB4; 
/*    background: white ; /// */

    font-weight: 600;
    border: 0;
    padding: 5px 9px;
}

button.boton-menu-en-popup  {
	font-family: inherit;
	margin-top : 10px;
	text-align: center;
	border-radius: 5px;
	cursor : pointer;
	color : black;
    background: #78CEB4; 
    font-weight: 600;
    border: 1 silver;

}


button.boton-menu-rojo {
	color : red !important;
    background: yellow !important;
}



button.boton-menu:hover {
/*    background: #4BBE9C; */
    background: #f2f2f2 ;
    color: black;
}


/*
.boton-menu {
	margin-left: 1px;
	margin-right : 3px;
	min-height:30px;
	background-color : lightblue ;
	text-align: center;
	border-radius: 5px;
	cursor : pointer;
	color : black;
}
*/

button.boton-teclado {
	margin: 0 3px;
	width: 34px;
	height:34px;
/*	background-color : lightgreen; */
	text-align: center;
/*	border-radius: 5%; */
	font-size: 24px;
	padding: 0;
	line-height: 24px;
	cursor:pointer;

    border-radius: 5px;
    background: #4D9DE0;
/*    color: white;   */
	color : brown ;
    border: 0;
    box-shadow: 0 0 5px rgba(255,255,255,0.5);

}

button.boton-teclado:hover {
    background: #1F6DAD;
}


.boton-teclado-rules {
	margin: 0 1px;
	width: 30px;
	height:30px;
	background-color : lightgreen ;
	text-align: center;
	border-radius: 5%;
	font-size: 24px;
	padding: 0;
	line-height: 24px;

}


.boton-teclado_aux {
	margin-left: 3px;
	margin-right : 4px;
	margin-top: 8px;
	width: 34px;
	height:34px;
	background-color : white;
	text-align: center;
	border-radius: 10%;
	font-size: 18px;
}


.flechas {
	width : 100%;
	text-align : right;
}

.boton {
	margin: 3px;
}
#footer {
	text-align : center ;
	color : #484a47;
	font-size: 15px;
}


#reportes {
	width: 95%;
	height: 300px;
	margin:0 auto;
	margin-top: 15px;
	border : 1px solid grey;
	background: white;
	padding:3px;
	overflow: scroll;

}

#reportes > p {
	margin:0;
}


#apertura p {
	margin-left: 20px;
	margin-top: 2px;
	margin-bottom: 2px;
}


p {
	font-size:15px; 
	color:brown; 
	text-align:left ;
	word-wrap: break-word;
}

.pr {
	color : gold;
	background: grey;
}

.tecla-animada {	
	-o-transition: all var(--tiempoAnimacion) ease;
	-ms-transition: all var(--tiempoAnimacion) ease;
	-moz-transition: all var(--tiempoAnimacion) ease;
	-webkit-transition: all var(--tiempoAnimacion) ease;
	transition: all var(--tiempoAnimacion) ease;
	position: absolute;
}

.tecla-animada-final {
	background: transparent !important;
	border: 0 !important;
	font-weight: 400;
	color: black;
	font-size: 26px;
}

#compartir-redes-sociales {
	  width: 100%;
	  max-width: 700px;
	  margin: 0 auto;
	  padding: 15px;
	  background: lightblue;
	}

.rrss-contenedor {
	width: fit-content;
	margin: 0 auto;
  }

.a2a_kit p {
    float: left;
    padding: 0 15px 0 0;
	color: black;
	margin: 0;
}

.popup-mensaje {
	width: 100%;
	padding: 30px;
	max-width: 450px; 
	height: 400px;
	background: rgba(255, 255, 255, 0.7);
	background: radial-gradient(#e0ac9d 0, #e0ac9d 40%, transparent 70%);
	color: #6c757d;
	

	position: absolute;
	left: calc(50% - 225px);
	-o-transition: all var(--tiempoAnimacionPopup) ease;
	-ms-transition: all var(--tiempoAnimacionPopup) ease;
	-moz-transition: all var(--tiempoAnimacionPopup) ease;
	-webkit-transition: all var(--tiempoAnimacionPopup) ease;
	transition: all var(--tiempoAnimacionPopup) ease;
	z-index: 2;
  }


.popup-mensaje-welcome {
	width: 100%;
	padding: 30px;
	max-width: 450px; 
	height: 400px;
	background: rgba(255, 255, 255, 0.7);
	background: radial-gradient(#e0ac9d 0, #e0ac9d 40%, transparent 70%);
	color: #6c757d;
	

	position: absolute;
	left: calc(50% - 225px);
	-o-transition: all var(--tiempoAnimacionPopup) ease;
	-ms-transition: all var(--tiempoAnimacionPopup) ease;
	-moz-transition: all var(--tiempoAnimacionPopup) ease;
	-webkit-transition: all var(--tiempoAnimacionPopup) ease;
	transition: all var(--tiempoAnimacionPopup) ease;
	z-index: 2;
  }

/*
h3 {
	font-size: 2em;
}
*/

#titulo_welcome {
	font-size: 2.5em;
	line-height: 1.5;
	margin-top : 0.5em;
	color: brown;
}



.popup-mensaje h2 {
	font-size: 28px;
	font-weight: 500;
	text-align: center;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 0;
 

}


.popup-mensaje-welcome h2 {
	font-size: 28px;
	font-weight: 500;
	text-align: center;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 0;
 
}


.inner-popup {

	
    padding: 50px 40px 50px 40px;
    height: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    align-content: center;
    justify-content: center;

}



.inner-popup-welcome {
	
    padding: 50px 40px 50px 40px;
    height: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    align-content: center;
    justify-content: center;

}


.botones-popup {
    display: flex;
    gap: 50px;
    margin: 15px 0 0 0;
}

a.boton-popup {
    text-align: center;
    border-radius: 5px;
    cursor: pointer;
	color: #6c757d;
    text-decoration: none;
    padding: 5px 10px;
}

a.boton-popup:hover {
    background-color: rgba(0,0,0,0.2);
}


.share {
	opacity: 0;
	bottom: -1500px;
}

.share p {
    text-align: center;
    font-weight: 600;
    color: rgba(0,0,0, 0.7);
}

.share p.close-popup {
	opacity: 0;
	pointer-events: none;
	font-weight: 400;
	margin: 10px 0 0 0; 
	color:rgb(168, 0, 0);
	cursor: pointer;
}

.outer {
	display: table;
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
}
  
.middle {
	display: table-cell;
	vertical-align: middle;
}
  
.inner {
	margin-left: auto;
	margin-right: auto;
}


.bloquear-botones {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	display: none;
}


.bloquear-botones2 {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
	display: none;
}


.flash-activo {
    background-color: gold !important; /* Color de alerta/flash (ej: amarillo) */
                transition: background-color 0.7s ease;
}

.mano-activa {
    color: darkblue; 
	background-color: transparent !important; /* Color de alerta/flash (ej: amarillo) */
                transition: background-color 0.7s ease;
}

.mano-pasiva {
	color:transparent;
	background-color: transparent !important; /* Color de alerta/flash (ej: amarillo) */
                transition: background-color 0.7s ease;
}


/* Animacion numeros */

.botones-inicio {
	z-index: 2;
	position: relative;
}

#animacionNumeros {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%; 
	overflow: hidden;
	z-index: 1;
}

#animacionNumeros .numeros-animados {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	font-size: 40px;
	font-weight: 600;
	color: #936e64;
	overflow: hidden;
	-o-transition: all 2s ease;
	-ms-transition: all 2s ease;
	-moz-transition: all 2s ease;
	-webkit-transition: all 2s ease;
	transition: all 2s ease;
}

#animacionNumeros .numeros-animados li {
	position: absolute;
	display: block;
	list-style: none;
	font-size: 36px;
	font-weight: 700;
	left: -100px;
	top: 100%;
	animation: numerosInicio --tiempoAleatorioNumero linear infinite;
}


#animacionNumeros2 .numeros-animados {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	font-size: 40px;
	font-weight: 600;
	color: #936e64;
	overflow: hidden;
	-o-transition: all 2s ease;
	-ms-transition: all 2s ease;
	-moz-transition: all 2s ease;
	-webkit-transition: all 2s ease;
	transition: all 2s ease;
}

#animacionNumeros2 .numeros-animados li {
	position: absolute;
	display: block;
	list-style: none;
	font-size: 36px;
	font-weight: 700;
	left: -100px;
	top: 100%;
	animation: numerosInicio --tiempoAleatorioNumero linear infinite;
}


/*
_______________________________ DRAG and DROP ____________________________________________*/



.draggable-table {

  border-collapse: collapse;
  -webkit-box-shadow: 0px 0px 10px 8px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 0px 10px 8px rgba(0, 0, 0, 0.1);
}



.draggable-table .draggable-table__drag {
  position: absolute;
  border: 1px solid #f1f1f1;
  z-index: 10;
  cursor: grabbing;
  -webkit-box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.05);
  box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.05);
  opacity: 1;
}
.draggable-table thead th {
  user-select: none;
}
.draggable-table tbody tr {
  cursor: grabbing;
}
.draggable-table tbody tr td {
  user-select: none;

}

.fila-drag {
	color: brown !important;
	background:white !important;
}
/*
_______________________________ Final de DRAG and DROP ____________________________________________
*/


@keyframes numerosInicio {
	from {
		left: -100px;
	}
	to {
		left: calc(100% + 100px);
	}
}



@media only screen and (max-width: 764px) {

	.w-popup-info {
		margin-top: 33vh;
	}


	.boton-menu {
	  font-size: 12px;
	  padding: 1px 3px;
	}

						    div#gameMenuItems {
							    top: calc(50% + 50px);
							    left: calc(50% - 50px);
							    width: 200px; 
							    text-align: center;
							    height: 600px;				/* era 400px */
							    overflow-x: hidden;
							    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5), 0 0 55px rgba(0, 0, 0, 0.5);
						    	z-index: 3;
							}


	div#menu button:nth-child(4), div#menu button:nth-child(7) {
		padding: 1px 6px;
	}

	#banner_inf1 , #banner_inf2 , #banner_inf3 {	
	    width: 420px  !important;
	}

	.sudoku-title  {
		font-size: 30px;
	}

	.sudoku-title2  {
		font-size: 26px;
	}

	.celda {
		width: 38px;
		height: 38px;
		line-height:26px;   
		font-size: 26px;
			padding:0px;
			margin:0px;
	}
    	
	#zona_inferior {
/*		width: 342px; */
		width: 367px; 
	}
	div#headerLogo {
		width :367px;
	}
    div#gameMenu {
/*        width: 342px; */
        width: 367px; 
    }

	ins.adsbygoogle[data-ad-status="unfilled"]  {
/*	    height: 210px  !important; 	*/
	    height: 50px  !important;
	    display: flex;
		justify-content: center;
	}


}

@media only screen and (max-width: 391px) {  

	.w-popup-info {
		margin-top: 33vh;
	}

	#menu {
		display: flex !important;
		flex-wrap: wrap;
		justify-content: center;
		gap: 5px;
	}

	#banner_inf1 , #banner_inf2 , #banner_inf3 {	
	    width: 350px  !important;
	}

	.boton-menu {
		font-size: 12px;
		margin: 2px;
	}

	.celda {
		width: 36px;
		height: 36px;
		line-height:26px;   
		font-size: 26px;
			padding:0px;
			margin:0px;
	}

	div#headerLogo {
		width :349px;
	}

	#zona_inferior {
/*		width: 324px; */
		width: 349px; 
	}

    div#gameMenu {
/*        width: 324px; */
        width: 349px; 
    }
        
	.sudoku-title  {
		font-size: 28px;
	}

	.sudoku-title2  {
		font-size: 24px;
	}



	#teclado {
		display: flex !important;
		justify-content: center;
	}


	ins.adsbygoogle[data-ad-status="unfilled"]  {
/*	    height: 190px  !important;	*/
	    height: 50px  !important;
	    display: flex;
		justify-content: center;
	}


	.popup-mensaje {
		max-width: 100vw;
		left: 0;
	}

	.popup-mensaje-welcome {
		max-width: 100vw;
		left: 0;
	}


}								


.hover  {	
}

@media (hover: hover) {

	.boton-menu:hover {	
/*			background-color: rgb(255, 241, 113); */
			background-color: #f2f2f2;
			  color:rgb(143, 52, 0);
/*			  box-shadow: 2px -3px 0px -2px rgb(0, 102, 255); */
	}
/*	
	.boton-teclado:hover {	
		 animation-name: botones_teclado;
		 animation-duration: 3s;
	}
*/
	.efecto_hover  {
		background: green;	
	}

}