/* ===========================/* ===========================
     CAMPO DE FÚTBOL (CSS)
   Encapsulado y centrado
=========================== */

.campo-futbol-container {
  display: flex;
  flex-direction: column;
  align-items: center;  /* ✔ Centra horizontalmente */
  justify-content: center;
  user-select: none;
  margin: 20px auto;    /* ✔ Margen automático horizontal */
  font-family: sans-serif;
  width: 100%;          /* ✔ Asegura ocupación total para centrar */
}

.campo-futbol-ui {
  text-align: center;
  margin-bottom: 8px;
}

.campo-btn {
  background-color: #2eb82e;
  color: black;
  border: none;
  padding: 6px 10px;
  border-radius: 5px;
  cursor: pointer;
  margin: 0 4px;
}

.campo-btn:hover {
  background-color: #25a225;
}

#campoCanvas {
  background: #2f7d32; /* verde pasto */
  border: 3px solid #ffffff;
  display: block;
  margin: 0 auto;      /* ✔ Centra el canvas */
}