.button-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px; /* 🔧 ← aquí reduces el espacio vertical y horizontal entre botones */
  width: 100%;
  margin: auto;
  max-width: 100%;
}

/* Estilos para los botones */
.icon-button {
  flex: 0 1 auto;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: black !important;
  border-radius: 5px;
  font-weight: bold;
  background-color: white;
  border: 2px solid #666;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
  margin: 0px; /* ← Esta línea controla el espacio entre botones */
  font-family: Georgia, 'Times New Roman', Times, serif;
}

.icon-button:hover {
  background-color: #e74c3c;
  color: white !important;
}

.icon-button:focus {
  background-color: #e0e0e0;
  outline: none;
}
.icon-button:active {
  background-color: #ccc;
}
.icon-button.disabled {
  background-color: gray;
  pointer-events: none;
  color: white !important;
}

h1, h2, h3, h6,h5, h4 {
  text-align: center; 
  margin: 8px 0;  /* Reducir margen arriba/abajo */
  padding: 0;
}

/* 🔹 📺 Resolución para PANTALLAS GRANDES (PC o laptops) */
@media (min-width: 1024px) {
  .icon-button {
      width: 55px;
      height: 55px;
      font-size: 20x !important; /* ← Prueba temporal */
  }
}

/* 🔹 📱 Resolución para TABLETS (pantallas medianas) */
@media (max-width: 1023px) and (min-width: 601px) {
  .button-container {
      max-width: 90%;
  }
  .icon-button {
      width: 50px;
      height: 50px;
      font-size: 20px; /* ✅ Tamaño medio */
  }
}

/* 🔹 📲 Resolución para CELULARES GRANDES (pantallas entre 480px y 600px) */
@media (max-width: 600px) and (min-width: 480px) {
  .button-container {
      max-width: 95%;
  }
  .icon-button {
      width: 45px;
      height: 45px;
      font-size: 18px; /* ✅ Tamaño más pequeño */
      margin: 1px; /* Corrige el error tipográfico aquí si hay un ;s */
  }
}

/* 🔹 📳 Resolución para CELULARES PEQUEÑOS (menos de 480px) */
@media (max-width: 479px) {
  .button-container {
      max-width: 100%;
  }
  .icon-button {
      width: 45px;
      height: 45px;
      font-size: 16px; /* ✅ Tamaño más pequeño aún */
  }
}


#bodyContent {
  display: none;
}
#content-container {
  transition: opacity 0.3s ease-in-out;
}

#bodyContent {
  display: none;
}
#content-container {
  transition: opacity 0.3s ease-in-out;
}