body {
  margin:2% auto auto auto;;
  font-family: Arial, sans-serif;
  color: white;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  text-align: center;
}

.marcador {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.cabecera {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 80%;
  font-size: 40px;
  font-weight: bold;
}


.logo-imder {
  width: 300px;
  height: auto;
}

.equipos {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  height: 45vh;
  gap: 100px;
}
.equipo {
  display: flex;
  align-items: center;
  height: 50vh;
  gap: 100px;
}

.bandera {
  width: 350px;
  height: auto;
  /*border-radius: 50%;
  border: 4px solid white; */
  object-fit: cover;
}

#puntuacion_local, #puntuacion_visitante {
  font-size: 100px;
  font-weight: bold;
}

.tiempo {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 30px;
}

#temporizador {
  font-size: 180px;
  font-weight: bold;
}

#etapa_juego_texto {
  font-size: 50px;
  font-weight: bold;
  height: 0vh;
}
.nombres-equipos {
  display: flex;
  justify-content: space-around;
  width: 70%;
  font-size: 88px;
  /* font-weight: bold; */
  font-family: fantasy;
  gap:65%;
}

/* Separador horizontal */
.separador {
  display: flex;
  justify-content: center;
  align-items: center;
  /* ¡Esta línea es la clave! */
  align-self: center;
}

.tiempo-central{
  display: flex;
  justify-content: center;
  width: 60%;
  font-size: 55px;
  height: 0vh;
  font-weight: bold;
  align-content: center;
  flex-wrap: nowrap;
  flex-direction: column;
}



/* La línea que separa */
.linea-horizontal {
  width: 70px;      /* longitud de la línea */
  height: 20px;       /* grosor */
  background-color: white;
  border-radius: 50px;
}

#popup-overlay .popup-content {
  position: relative;
  /* centrar */
  display: flex;
  justify-content: center;
  align-items: center;
}

#popup-overlay .popup-content img {
  /* Porcentaje de la ventana */
  max-width: 90vw;
  max-height: 90vh;
  /* O tamaño fijo, por ejemplo: */
  /* width: 600px;
     height: auto; */
  border-radius: 8px;
  box-shadow: 0 0 20px rgba(0,0,0,0.5);
}


