@charset "utf-8";
/* CSS Document */

@media only screen and (orientation: landscape) {
  vertical {
    display: none !important;
  }
  /* O puedes mostrar un mensaje indicando que se necesita la orientación vertical */
  .horizontal {
    display: block !important;
	position:fixed;
	top:0%;
	left:0%;
    text-align: center;
    font-size: 20px;
	width:100%;
	height:100%;
    color:#FFF;
	background-color:#FF9900;
	z-index:200;
	padding-top:20%
  }
  
  
  
}

.horizontal {
	display:none;
	}

body {
	/* [disabled]position: relative; */
	margin: auto;
	max-width: 100%; /*Local*/
	/* Servidor
	max-width:1200px;
	margin-top:50px;
	*/
	
	font-family: Verdana, Geneva, sans-serif;
	/*height:100%;*/
	text-align:center;
	}

header {
	position:fixed;
	margin:auto;
	top:0px;
	left:0px;
	height:60px;
	width:100%;
	background-color:#003399;
	z-index:100;
	}

a {
	text-decoration:none;
	color:#000;
	}
	
.alignLeft {
	text-align:left;
	}

.alignRight {
	text-align:right;
	}

.clear {
	clear:both;
	}
	
.mitad {
	position:relative;
	float:left;
	width:50%;
	}
	
.tercio {
	position:relative;
	float:left;
	width:30%;
	}
	
.cuarto {
	position:relative;
	float:left;
	width:25%;
	font-size:16px;
	}

.court {
	position:absolute;
	margin:auto;
	width:100%;
	max-width:1200px;
	height:100%
	}
	
	.seccion1 {
		position:absolute;
		width:100%;
		top:9%;
		height:10%;
	/*	background-color:#EB9687;*/
		}
		
		.pistaDura {
			background-color:#19A5C8  !important;
			}
		.pistaCesped {
			background-color:#6C6 !important;
			}
		.pistaTierraBatida {
			background-color:#EB9687 !important;
			}
		
		.nombreJugador {
			position:relative;
			font-size:12px;
			padding:2%;
			text-align:center;
			}
		
		.fecha {
			position:relative;
			font-size:12px;
			padding-top:2%;
			}
			
		.fotoJugador {
			position:relative;
			margin:auto;
			width:50px;
			height:50px;
			border:#666 2px solid;
			border-radius:25px;
			text-align:center;
			margin-top:0px;
			overflow:hidden;
			}
		
	.seccion2 {
		position:absolute;
		width:100%;
		top:19%;
		height:12%;
		}
		
		.franja {
			position:relative;
			font-size:10px;
			width:80%;
			margin:auto;
			border-bottom:#666 1px solid;
			padding:5px 0px 5px 0px;
			}
			
		.franja2 {
			position:relative;
			font-size:10px;
			width:80%;
			margin:auto;
			border-bottom:#666 1px solid;
			}
			
			.puntos {
				font-size:30px;
				background-color:#EB9687;;
				}
		
	.seccion3 {
		position:absolute;
		width:100%;
		top:32%;
		height:7%;
		font-size:12px;
		}
		
		
		
	.seccion4 {
		position:absolute;
		width:100%;
		top:40%;
		height:50%;
		/*background-color:#EB9687;*/
		}
		
		.lateral1 {
			position:absolute;
			border:#FFF 3px solid;
			top:0px;
			left:0px;
			width:49%;
			height:16%;
			}
			
				.bola1 {
					position:absolute;
					width:50px;
					height:50px;	
					background-color:#9F3;
					border:#FFF 2px solid;
					text-align:center;
					font-size:10px;
					color:#000;
					border-radius:25px;
					top:8%;
					left:10%;
					}
			
				.bola16 {
					position:absolute;
					width:50px;
					height:50px;	
					background-color:#9F3;
					border:#FFF 2px solid;
					text-align:center;
					font-size:10px;
					color:#000;
					border-radius:25px;
					top:8%;
					right:10%;
					}
			
				.bola2 {
					position:absolute;
					width:50px;
					height:50px;	
					background-color:#9F3;
					border:#FFF 2px solid;
					text-align:center;
					font-size:10px;
					color:#000;
					border-radius:25px;
					top:8%;
					left:10%;
					}
					
				.bola15 {
					position:absolute;
					width:50px;
					height:50px;	
					background-color:#9F3;
					border:#FFF 2px solid;
					text-align:center;
					font-size:10px;
					color:#000;
					border-radius:25px;
					top:8%;
					right:10%;
					}
					
					
				.bola3 {
					position:absolute;
					width:50px;
					height:50px;	
					background-color:#9F3;
					border:#FFF 2px solid;
					text-align:center;
					font-size:10px;
					color:#000;
					border-radius:25px;
					top:40%;
					left:45%;
					}
			
				.bola4 {
					position:absolute;
					width:50px;
					height:50px;
					background-color:#9F3;
					border:#FFF 2px solid;
					text-align:center;
					font-size:10px;
					color:#000;
					border-radius:25px;
					top:75%;
					left:10%;
					}
					
				.bola5 {
					position:absolute;
					width:50px;
					height:50px;
					background-color:#9F3;
					border:#FFF 2px solid;
					text-align:center;
					font-size:10px;
					color:#000;
					border-radius:25px;
					top:10%;
					left:5%;
					}
			
				.bola6 {
					position:absolute;
					width:50px;
					height:50px;
					background-color:#9F3;
					border:#FFF 2px solid;
					text-align:center;
					font-size:10px;
					color:#000;
					border-radius:25px;
					top:10%;
					left:45%;
					}
					
				.bola7 {
					position:absolute;
					width:50px;
					height:50px;	
					background-color:#9F3;
					border:#FFF 2px solid;
					text-align:center;
					font-size:10px;
					color:#000;
					border-radius:25px;
					top:40%;
					left:5%;
					}
			
				.bola8 {
					position:absolute;
					width:50px;
					height:50px;
					background-color:#9F3;
					border:#FFF 2px solid;
					text-align:center;
					font-size:10px;
					color:#000;
					border-radius:25px;
					top:75%;
					left:30%;
					}
					
				.bola9 {
					position:absolute;
					width:50px;
					height:50px;
					background-color:#9F3;
					border:#FFF 2px solid;
					text-align:center;
					font-size:10px;
					color:#000;
					border-radius:25px;
					top:51%;
					left:10%;
					}
			
				.bola10 {
					position:absolute;
					width:50px;
					height:50px;
					background-color:#9F3;
					border:#FFF 2px solid;
					text-align:center;
					font-size:10px;
					color:#000;
					border-radius:25px;
					top:51%;
					right:5%;
					}
			
				.bola11 {
					position:absolute;
					width:50px;
					padding-top:0px;
					height:50px;
					background-color:#9F3;
					border:#FFF 2px solid;
					text-align:center;
					font-size:10px;
					color:#000;
					border-radius:25px;
					top:0%;
					right:12%;
					overflow:hidden;
					}
					
				.bola12 {
					position:absolute;
					width:50px;
					padding-top:0px;
					height:50px;
					background-color:#9F3;
					border:#FFF 2px solid;
					text-align:center;
					font-size:10px;
					color:#000;
					border-radius:25px;
					top:0%;
					left:12%;
					overflow:hidden;
					}
					
				.bola13 {
					position:absolute;
					width:50px;
					padding-top:0px;
					height:50px;
					background-color:#666;
					border:#FFF 2px solid;
					text-align:center;
					font-size:10px;
					color:#FFF;
					border-radius:25px;
					top:0%;
					left:80%;
					}
					
				.bola14 {
					position:absolute;
					width:50px;
					padding-top:0px;
					height:50px;
					background-color:#FFF;
					border:#FFF 2px solid;
					text-align:center;
					font-size:10px;
					color:#FFF;
					border-radius:25px;
					top:0%;
					left:60%;
					}
					
		.variables1 {
					position:absolute;
					width:70%;
					height:39px;
					text-align:left;
					font-size:16px;
					color:#000;
					top:5%;
					left:5%;
					}
					
		.variables2 {
					position:absolute;
					width:70%;
					height:39px;
					text-align:left;
					font-size:16px;
					color:#000;
					top:35%;
					left:5%;
					}
					
		.lateral2 {
			position:absolute;
			border:#FFF 3px solid;
			top:0px;
			left:50%;
			width:49%;
			height:16%;
			}

		.central1 {
			position:absolute;
			border:#FFF 3px solid;
			top:16%;
			left:0%;
			width:24%;
			height:68%;
			}

		.central2 {
			position:absolute;
			border:#FFF 3px solid;
			top:16%;
			left:25%;
			width:24%;
			height:68%;
			}
			
			.zonaSaque1 {
				position:absolute;
				height:49%;
				border-bottom:#FFF 4px solid;
				width:100%;
				}
				
			.zonaSaque2 {
				position:absolute;
				height:50%;
				width:100%;
				top:50%;
				}
			
		.central3 {
			position:absolute;
			border:#FFF 3px solid;
			top:16%;
			left:50%;
			width:24%;
			height:68%;
			}

		.central4 {
			position:absolute;
			border:#FFF 3px solid;
			top:16%;
			left:75%;
			width:24%;
			height:68%;
			}
			
		.lateral3 {
			position:absolute;
			border:#FFF 3px solid;
			top:84%;
			left:0%;
			width:49%;
			height:16%;
			}
			
		.lateral4 {
			position:absolute;
			border:#FFF 3px solid;
			top:84%;
			left:50%;
			width:49%;
			height:16%;
			}



	.seccion5 {
		position:absolute;
		width:100%;
		top:76%;
		height:11%;
		}
		
	.seccion6 {
		position:absolute;
		width:100%;
		top:92%;
		height:9%;
		}
		

/*-------Flotante--------*/

	.popup {
	  display: none;
	  position: fixed;
	  z-index: 999;
	  top: 30%;
	  left: 50%;
	  transform: translate(-50%, -50%);
	  background: #fff;
	  padding: 2em;
	  box-shadow: 0 0 10px rgba(0,0,0,0.3);
	}
	.popup.show {
	  display: block;
	}


    .popup-juego {
      display: none;
      position: fixed;
      top: 10%;
      left: 10%;
      width: 80%;
      height: 80%;
      background: rgba(255, 255, 255, 0.95);
      z-index: 9999;
      padding: 2rem;
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
      border-radius: 20px;
      animation: fadeIn 0.4s ease-out;
    }

    .popup-contenido {
      text-align: center;
      font-size: 1.5em;
      margin-top: 20%;
    }

    .popup-juego.show {
      display: block;
    }

    #confirmarJuego {
      margin-top: 20px;
      padding: 10px 20px;
      font-size: 1.2em;
      background-color: #2e8b57;
      color: white;
      border: none;
      border-radius: 10px;
      cursor: pointer;
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: scale(0.9); }
      to { opacity: 1; transform: scale(1); }
    }
			
	.final-juego {
	  display: none; /* Oculto por defecto */
	  position: absolute;
	  top: 80%;
	  width: 100%;
	  text-align: center;
	  font-size: 18px;
	}	
	

.titulo {
	position:fixed;
	top:10%;
	width:80%;
	text-align:center;
	width:70%;
	left:15%;
	font-size:36px;
	}	
	
.pelota {
	position:fixed;
	top:20%;
	left:25%;
	margin:auto;
	width:50%;
	}
	
	
.registro {
	position:fixed;
	top:50%;
	width:70%;
	left:15%;
	/*background-color:#CCC;*/
	text-align:center;
	height:30%;
	}

.quadroLogin {
	position:absolute;
	top:0%;
	width:98%;
	left:0%;
	background-color:#D7DF23;
	border:#A5A520 4px solid;
	height:40%;
	text-align:center;
	}
	
	
	.inputEmail {
		position:absolute;
		width:80%;
		padding:2%;
		left:8%;
		top:10%;
		text-align:center;
		}	
		
	.inputEmail2 {
		position:absolute;
		width:80%;
		padding:2%;
		left:8%;
		top:50%;
		text-align:center;
		}
		
	.botonAcceso {
		position:absolute;
		width:40%;
		left:30%;
		bottom:30%;
		background-color:#D7DF23;
		border:#A5A520 5px solid;
		height:20%;
		}
	
	.botonAcceso2 {
		position:relative;
		width:40%;
		background-color:#D7DF23;
		border:#A5A520 5px solid;
		padding:10px 0px 10px 0px;
		margin-bottom:30px;
		}
	

	
.registrarse {
	position:absolute;
	bottom:10%;
	width:50%;
	left:25%;
	font-size:12px;	
	}
	
.cabecera {
	position:fixed;
	top:0%;
	left:0%;
	width:100%;
	height:8%;
	background-color:#D7DF23;
	z-index:100;
	}
	
	.logoCabecera {
		position:absolute;
		left:5%;
		height:80%;
		top:10%;
		}
		
	.tituloCabecera {
		position:absolute;
		right:5%;
		text-align:center;
		top:35%;
		width:70%;
		color:#FFF;
		}
		
		.listadoPartidos {
			position:relative;
			width:100%;
			margin-top:20%;
			min-height:50%;
			}
			
			.partidoQ1 {
				position:relative;
				display:block;
				width:100%;
				background-color:#EEE;
				border-top:#666 1px solid;
				border-bottom:#666 1px solid;
				font-size:12px;
				height:60px;
				}
				
				.partidoQ2 {
					position:absolute;
					top:0%;
					left:0%;
					width:20%;
					/*background-color:#0F9;*/
					padding-top:2%;
					padding-bottom:2%;
					}
					
				.partidoQ3 {
					position:absolute;
					top:0%;
					left:20%;
					width:78%;
					/*background-color:#FC3;*/
					text-align:left;
					padding-left:2%;
					padding-top:2%;
					padding-bottom:2%;

					}
					
				.partidoQ4 {
					position:absolute;
					top:0%;
					left:80%;
					width:20%;
					/*background-color:#93F;*/
					height:100%;
					}
					
					.bolaResultado {
						position:absolute;
						height:60%;
						top:20%;
						left:20%;
						}
						
						
				.nuevoPartido {
					position:fixed;
					right:7%;
					bottom:3%;
					width:60px;
					height:50px;
					border:#999 1px solid;
					background-color:#D7DF23;
					border-radius:30px;
					font-size:30px;
					padding-top:10px;
					}
					
				.zonaDatos {
					position:relative;
					width:100%;
					margin:auto;
					/*background-color:#999;*/
					font-size:12px;
					margin-bottom:20px;
					}
					
					.fotoUsuario {
						position:absolute;
						right:5%;
						top:-15%;
						width:50px;
						height:50px;
						border-radius:25px;
						border:1px solid #333333;
						background-color:#CCC;
						overflow:hidden;
						}
					
					.tituloZonaDatos {
						position:relative;
						text-align:left;
						padding:10px 10px 10px 10px;
						}
						
						.tituloParte1 {
							position:relative;
							float:left;
							width:30%;
							padding-top:5px;
							}
							
						.tituloParte2 {
							position:relative;
							float:left;
							width:30%;
							padding-top:5px;
							}
							
						.tituloParte3 {
							position:relative;
							float:left;
							width:20%;
							padding-top:5px;
							}
							
							.inputPartido {
								position:relative;
								width:90%;
								padding:2%;
								}
								
						.tituloParte70 {
							position:relative;
							float:left;
							width:70%;
							}
							
/*-------------------------------------------------------------------------------------------------------*/

.seccionJugadores{
	position:fixed;
	top:5%;
	width:100%;
	z-index:100;
	}
	
.marginTop20 {
	margin-top:20px;
	}
	
.parte1 {
	position:relative;
	width:100%;
	margin-top:0px;
	}
	
.parte2 {
	position:relative;
	width:100%;
	margin-top:20px;
	}
	
	.nombreJugadorA {
		position:absolute;
		top:50px;
		left:10px;
		width:45%;
		height:25px;
		background-color:#999;
		text-align:right;
		font-size:12px;
		padding:5px 5px 0px 0px;
		z-index:100;
		}
		
		.fotoJugadorA {
			position:absolute;
			top:-20px;
			left:10px;
			width:40px;
			height:40px;
			border:#666 2px solid;
			border-radius:25px;
			background-color:#CCC;
			text-align:center;
			z-index:110;
			}
		
	.nombreJugadorB {
		position:absolute;
		top:50px;
		right:10px;
		width:45%;
		height:25px;
		background-color:#999;
		text-align:left;
		font-size:12px;
		padding:5px 0px 0px 5px;
		z-index:100;
		}
		
		.fotoJugadorB {
			position:absolute;
			top:-20px;
			right:10px;
			width:40px;
			height:40px;
			border:#666 2px solid;
			border-radius:25px;
			background-color:#CCC;
			text-align:center;
			z-index:110;
			}
			
	.seccionVictorias {
		position:relative;
		margin:auto;
		width:90%;
		text-align:center;
		font-size:16px;
		padding:10px;
		margin-top:36%;
		background-color:#D7DF23;
		}
		
		.seccionVictorias1 {
			position:relative;
			float:left;
			width:20%;
			}
			
		.seccionVictorias2 {
			position:relative;
			float:left;
			width:60%;
			}
		
		.seccionVictorias3 {
			position:relative;
			float:right;
			width:20%;
			}
			
	.seccionEstadisticas {
		position:relative;
		width:95%;
		margin:auto;
		text-align:center;
		font-size:10px;
		}
		
		.parteA {
			position:relative;
			float:left;
			width:9.7%;
			padding:5px 0px 5px 0px;
			}
			
		.borderR {
			border-right:1px solid #333;
			}
			
		.borderL {
			border-left:1px solid #333;
			}	
			
		.parteB {
			position:relative;
			float:left;
			width:8%;
			padding:5px 0px 5px 0px;
			}
			
		.parteC {
			position:relative;
			float:left;
			width:32%;
			padding:5px 0px 5px 0px;
			}
			
		.amarilloFuerte {
			background-color:#D7DF23;
			}
			
		.amarilloClaro {
			background-color:#FFFF80;
			}
			
			.numeroGrande {
				position:relative;
				font-size:10px;
				color:#000000;
				}

			.numeroPeque {
				position:relative;
				font-size:8px;
				color:#666666;
				}
		
.seccionJuego {
	position:relative;
	margin:auto;
	width:90%;
	text-align:center;
	font-size:16px;
	padding:10px;
	margin-top:30px;
	background-color:#D7DF23;
	}
	
			
	.seccionJuegoB {
		position:relative;
		width:80%;
		margin:auto;
		font-size:8px;
		}
		
		.parteD {
			position:relative;
			float:left;
			width:14%;
			padding:5px 0px 5px 0px;
			}
			
		.parteE {
			position:relative;
			float:left;
			width:22%;
			padding:5px 0px 5px 0px;
			}
			
		.parteF {
			position:relative;
			float:left;
			width:14%;
			padding:5px 0px 5px 0px;
			font-size:14px;
			}
			
		.parteG {
			position:relative;
			float:left;
			width:22%;
			padding:5px 0px 5px 0px;
			font-size:14px;
			background-color:#FFFF80;
			}

.borderTop {
	border-top:#333333 2px solid;
	}

.borderBottom {
	border-bottom:#333333 1px solid;
	}


.cuadro {
	position:relative;
	margin:auto;
	/*background-color:#0099CC;*/
	width:80%;
	min-height:200px;
	margin-bottom:20px;
	}

.iconoPanel {
	position:relative;
	display:block;
	margin-top:30px;
	margin:auto;
	width:150px;
	margin-bottom:30px;
	}