html {
  font-size: 16px;
}

body {
  background-color: #f6f7f9;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #198754;
}

/* Formularios angostos centrados (login, cuenta). */
.tarjeta-angosta {
  max-width: 420px;
  margin: 1.5rem auto;
}

/* Credenciales generadas: fuente monoespaciada y selección fácil. */
.credencial {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.25rem;
  user-select: all;
}

/* Botones y campos cómodos para el dedo en pantallas chicas. */
@media (max-width: 576px) {
  .btn, .form-control, .form-select {
    min-height: 44px;
  }
}

/* ---------- Partido en vivo ---------- */
.marcador .goles {
  font-size: 3.5rem;
  font-weight: 700;
  line-height: 1.1;
}

.marcador .reloj {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 2.5rem;
  font-weight: 600;
}

.marcador .reloj .agregado {
  font-size: 1.5rem;
  color: #dc3545;
}

/* Botones grandes: el árbitro los toca con el partido en juego. */
.btn-accion {
  min-height: 56px;
  font-size: 1.1rem;
}

/* ---------- Posiciones ---------- */
.tabla-posiciones tr.clasifica td:first-child {
  box-shadow: inset 4px 0 0 #198754;
}

.leyenda-clasifica {
  display: inline-block;
  width: 4px;
  height: 1em;
  background: #198754;
  vertical-align: middle;
  margin-right: 4px;
}

.llaves .ronda {
  width: 220px;
}