body {
  background-color: #F5B027;
}
header{
  background-color: white;
}

header h1 {
  margin: 0; /* quita margen superior e inferior */
  padding: 10px 0; /* opcional: controlas tú el espacio */
}

.message-container h2 {
  margin: 0; 
  padding: 5px 0; /* igual aquí defines tú el espacio */
}
.message-container {
  background-color: white;
  margin-bottom: 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/*Estilos div donde se muestra la letra random*/
#contenedorLetraRandom {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #F5B027;
  border-radius: 10px;
  margin-bottom: 10px; /* Ajusta el valor según la separación que desees */
}

#mostarLetraRandom {
  display: flex;
  justify-content: center;
  align-items: center;
  border: solid 3px black;
  height: 80px;
  width: 80px;
  font-size: 60px;
  align-items: center;
  background-color: white;
  border-radius: 10px;
  text-transform: uppercase;
  margin-bottom: 10px; /* Ajusta el valor según la separación que desees */
}

/*ESTILOS JOKER*/
#contenedorJoker {
  background-color: #F5B027; /* Cambia al mismo color del fondo del body */
  display: none;
  width: 800px;
}

.card-custom {
  border: 2px solid #000;
  padding: 20px;
  border-radius: 10px;
  background-color: #F5B027; /* Cambia al mismo color del fondo del body */
  box-shadow: 0 4px 8px rgba(0,0,0,.05);
}

.input-custom {
  border: 2px solid #000;
  border-radius: 5px;
  font-size: 50px;
}
/* FINAL ESTILOS JOKER*/

/*ESTILO CUADRICULA DINÁMICA */
#contenedor {
  display: flex;
  width: 430px; /* Tamaño total de la cuadrícula (5 * 80px) */
  height: 450px; /* Tamaño total de la cuadrícula (5 * 80px) */
  justify-content: center;
  align-items: center;
  margin: auto; /* Centra el contenedor en la página */
}

.cuadrado {
  width: 70px; /* Ajusta el ancho según tus preferencias */
  height: 70px; /* Ajusta la altura según tus preferencias */
  text-align: center;
  background-color:white;
  font-size: 50px; /* Ajusta el tamaño de la fuente según tus preferencias */
  text-transform: uppercase;
  color: #000;
  border: solid 3px black;
  border-radius: 10px;
  margin: 5px;
}

/* Estilos de los inputs dentro de la cuadricula */
input{
  width: 80px;
  height: 80px;
  text-align: center;
  background-color:  #F5B027;
  font-size: 60px;
  text-transform: uppercase;
  color: #000;
}
/*FINAL ESTILO CUADRICULA DINÁMICA */

/* Estilo para el pop-up */
.popup {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  padding: 20px;
  border: 2px solid #1a1a1a;
  border-radius: 10px;
  z-index: 999;
}


.popup p ,h4 {
  text-align: center;
  margin: 0 0 10px 0; /* Agregamos espacio inferior de 10px */
}

.popup button {
  display: block;
  margin: auto;
}

#mostarInstrucciones {
  display: block;
  margin: auto;
  padding: 10px 20px;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  color: #fff;
  background-color: #169716;
  border: 2px solid #000;
  border-radius: 5px;
  transition: background-color 0.3s, color 0.3s;
}
#mostarInstrucciones:hover {
  background-color: #0056b3;
  transition: transform 1s ease, background-color 1s ease;
  color: #fff;
}
/* Contenedor de la puntuación y fecha final */
.container-fluid{
  margin-top: 100px;
  display: none;
  background-color: #F5B027;

}
.container-fluid p{
  font-size: 18px;
}


/*CSS del resultado*/
#resultados {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 50%); /* Cambiado de -50% a 50% para centrar hacia abajo */
  background-color: rgba(0, 0, 0, 0.7);
  padding: 20px;
  color: #fff;
  border-radius: 10px;
  text-align: center;
}

#resultados h1 {
  margin: 0; /* Elimina el margen predeterminado del encabezado */
}