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;
}

body.sin-cabecera {
  margin: 0;
}

.sin-cabecera .marcador {
  box-sizing: border-box;
  min-height: 100vh;
  min-height: 100svh;
  padding: 24px 0;
}

.sin-cabecera .equipos {
  margin-top: 0;
}

.sin-cabecera .tiempo-central {
  padding-bottom: 0;
}

.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: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) 8% minmax(0, 1fr) minmax(0, 1.5fr);
  column-gap: 16px;
  align-items: center;
  width: 84%;
  margin-top: 24px;
}
.equipo { display: contents; }

.bandera { width: 100%; max-width: 350px; height: clamp(90px, 35vh, 350px); object-fit: contain; }

#puntuacion_local, #puntuacion_visitante { margin: 0; font-size: clamp(42px, 10vw, 200px); line-height: 1.1; font-weight: bold; }

.tiempo {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 30px;
}

#temporizador { font-size: clamp(44px, 15vh, 150px); font-weight: bold; line-height: 1.1; }

#etapa_juego_texto { font-size: clamp(22px, 4vh, 44px); font-weight: bold; line-height: 1.2; }
.nombres-equipos {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) 8% minmax(0, 1fr) minmax(0, 1.5fr);
  column-gap: 16px;
  width: 84%;
  margin-top: 16px;
  font-size: clamp(24px, 4vw, 72px);
  line-height: 1.1;
  font-family: fantasy;
}
.nombre-equipo {
  min-width: 0;
  white-space: nowrap;
  text-align: center;
}

/* Separador horizontal */
.separador {
  display: flex;
  justify-content: center;
  align-items: center;
  /* ¡Esta línea es la clave! */
  align-self: center;
}

.tiempo-central {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 94%;
  margin-top: clamp(24px, 4vh, 44px);
  padding-bottom: 24px;
  font-weight: bold;
}



/* 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);
}



.cabecera { gap: 24px; }
.cabecera h2 { min-width: 0; overflow-wrap: anywhere; font-size: clamp(24px, 3.2vw, 60px); }
.logo-imder { width: min(20vw, 300px); flex-shrink: 0; }
.linea-horizontal { width: clamp(18px, 4vw, 70px); height: clamp(6px, 1vw, 20px); }
@media (max-width: 600px) {
  .equipos, .nombres-equipos { width: 94%; column-gap: 6px; }
  .equipo { gap: 6px; }
  .cabecera { width: 94%; gap: 12px; }
}

.equipos > .equipo > * { justify-self: center; min-width: 0; }
#equipo_local { grid-column: 1; }
#equipo_visitante { grid-column: 5; }

#controles-pantalla{position:fixed;right:16px;bottom:16px;z-index:1100;max-width:calc(100vw - 32px);text-align:right}
#activar-pantalla-completa{min-height:44px;padding:12px 18px;border:1px solid #ffffff80;border-radius:10px;background:#102d54ed;color:#fff;font:600 15px Arial,sans-serif;cursor:pointer}
#activar-pantalla-completa:focus-visible{outline:3px solid #ff9d48;outline-offset:3px}
#aviso-pantalla-completa:empty{display:none}
#aviso-pantalla-completa{max-width:340px;padding:12px;border-radius:10px;background:#102d54;color:white;font:14px/1.5 Arial,sans-serif}
:fullscreen #controles-pantalla{display:none}