.celda {
  aspect-ratio: 1 / 1;
  width: 100%;
  font-size: calc(10px + 1.5vw);
  max-width: 50px;
  max-height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid var(--border-cell, #444);
  text-transform: uppercase;
  background-color: var(--dark-2, #222);
  color: white;
  font-weight: bold;
}


/* Estados */
.celda.correcta {
  background-color: var(--green-color);
}

.celda.presente {
  background-color: var(--yellow-color);
  color: #fff;
}

.celda.incorrecta {
  background-color: var(--gray-color);
  color: #fff;
}


/* Estados */
.correcta {
  background-color: var(--green-color);
}

.presente {
  background-color: var(--yellow-color);
  color: #fff;
}

.incorrecta {
  background-color: var(--gray-color);
  color: #fff;
}

.celda-activa {
  border: 2px solid white;
  outline-offset: 2px;
  transition: outline 0.3s ease;
}