/* Estilos generales */
body {
  font-family: Arial, sans-serif;
  text-align: center;
  margin: 0;
  padding: 0;
}

h1 {
  margin: 20px 0;
}

.grid {
  display: grid;
  grid-template-columns: repeat(10, 50px); /* 10 columnas por defecto */
  gap: 10px;
  justify-content: center;
  margin: 20px auto;
}

.grid button {
  width: 50px;
  height: 50px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 5px;
  cursor: default;
}

/* Colores según el estado */
.available {
  background-color: #4caf50; /* Verde */
  color: #000;
}

.reserved {
  background-color: #ffd700; /* Amarillo */
  color: #000;
}

.paid {
  background-color: #989898; /* Gris claro */
  color: #fff;
}

/* Estado desconocido */
.unknown {
  background-color: #ff6347; /* Rojo */
  color: #fff;
}

/* Ajustes para pantallas pequeñas (teléfonos) */
@media (max-width: 768px) {
  .grid {
    grid-template-columns: repeat(5, 50px); /* Cambia a 5 columnas en pantallas pequeñas */
    gap: 8px; /* Reduce el espacio entre botones */
  }

  .grid button {
    width: 45px; /* Botones más pequeños */
    height: 45px;
    font-size: 14px; /* Texto más pequeño */
  }

  h1 {
    font-size: 20px; /* Reduce el tamaño del título */
  }
}

@media (max-width: 480px) {
  .grid {
    grid-template-columns: repeat(8, 40px); /* Cambia a 4 columnas en pantallas muy pequeñas */
    gap: 6px; /* Reduce aún más el espacio entre botones */
  }

  .grid button {
    width: 40px; /* Botones más pequeños */
    height: 40px;
    font-size: 12px; /* Texto más pequeño */
  }

  h1 {
    font-size: 18px; /* Reduce aún más el tamaño del título */
  }
}