body {
  margin: 0;
  font-family: 'Segoe UI', sans-serif;
  background-color: #f4f4f4;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

#tabla-periodica-container {
  width: 100%;
  overflow-x: auto; /* Habilitamos el desplazamiento horizontal */
}

#tabla-periodica {
  display: grid;
  grid-template-columns: repeat(18, 90px); /* Aumentamos el tamaño de las celdas */
  gap: 8px;
  padding: 10px;
  justify-content: center;
  align-items: center;
  grid-auto-rows: minmax(60px, auto); /* Asegura que las filas tengan una altura mínima */
}

.elemento {
  background-color: #fff;
  border-radius: 10px;
  padding: 10px; /* Aumentamos el padding para darle más espacio a los nombres */
  text-align: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  min-height: 50px; /* Ajustamos la altura mínima para evitar que el contenido se desborde */
}

.elemento:hover {
  transform: scale(1.1);
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
  background-color: #e7f0ff;
}

.numero {
  position: absolute;
  top: 5px;
  right: 5px;
  font-size: 0.9rem; /* Aumentamos un poco el tamaño del número */
  color: #888;
}

.symbol {
  font-size: 1.6rem; /* Aumentamos el tamaño del símbolo */
  font-weight: bold;
  color: #333;
}

.name {
  font-size: 0.9rem; /* Aumentamos el tamaño del nombre */
  color: #777;
  margin-top: 5px;
  word-wrap: break-word; /* Aseguramos que el texto se ajuste dentro del cuadro */
  white-space: normal; /* Permite que el texto se divida en varias líneas si es necesario */
}

.alcalino         { background-color: #ffb3ba; }
.alcalinoterreo   { background-color: #ffdfba; }
.metal-transicion       { background-color: #ffffba; }
.lantanido              { background-color: #baffc9; }
.actinido               { background-color: #bae1ff; }
.metaloide              { background-color: #e0baff; }
.no-metal               { background-color: #d3f8e2; }
.halogeno               { background-color: #cce5ff; }
.gas-noble              { background-color: #e6ccff; }
.metal-post-transicion  { background-color: #f4cccc; }
.desconocido { background-color: #ebebeb; }

.seleccionado-primer {
  border: 4px solid #0dc0f7; /* Un borde verde (puedes cambiar el color) */
  background-color: #e8f5e9;  /* Un color de fondo suave */
  box-shadow: 0 0 10px rgba(0, 128, 0, 0.5); /* Un pequeño resplandor verde */
}

/* Estilo de deshabilitado para el primer elemento, no interactuable */
.disabled {
  pointer-events: none; /* Evita que se pueda hacer clic en el elemento */
}

/* También puedes agregar algunos estilos generales para los elementos seleccionados */
.seleccionado {
  background-color: #f0f0f0; /* Color de fondo para elementos seleccionados */
  border: 1px solid #ccc; /* Un borde ligero para los seleccionados */
}

@media screen and (max-width: 1024px) {
  #tabla-periodica {
    grid-template-columns: repeat(18, 80px); /* Ajustamos el tamaño para pantallas más pequeñas */
  }

  .elemento {
    padding: 12px; /* Ajustamos el padding */
  }
}

@media screen and (max-width: 768px) {
  #tabla-periodica {
    grid-template-columns: repeat(18, 70px); /* Ajustamos el tamaño para pantallas más pequeñas */
  }

  .elemento {
    padding: 10px; /* Ajustamos el padding */
  }
}

@media screen and (max-width: 480px) {
  #tabla-periodica {
    grid-template-columns: repeat(18, 60px); /* Ajustamos el tamaño para pantallas más pequeñas */
  }

  .elemento {
    padding: 8px; /* Ajustamos el padding para pantallas pequeñas */
  }
}

#volver-magister {
  position: fixed;
  bottom: 1.5rem;      /* Ahora está abajo */
  left: 1.5rem;        /* Pegado a la izquierda */
  background-color: #3498db;
  color: white;
  border: none;
  border-radius: 50%;
  width: 56px;         /* Más grande */
  height: 56px;        /* Más grande */
  font-size: 2rem;     /* Ícono más grande */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
  transition: background-color 0.2s ease;
  z-index: 1000;
}

#volver-magister:hover {
  background-color: #2980b9;
  transform: scale(1.05);
}