/* =====================================================
   VOCABULARY CARDS — 1.º A 6.º DE PRIMARIA

   Estilos para la presentación de tarjetas interactivas
   de todos los cursos de Primaria.

   Estructuras compatibles:
   - 1.º y 2.º: sets de 8 elementos,
     distribuidos en 2 filas de 4 tarjetas.
   - 3.º a 6.º: sets de 10 elementos,
     distribuidos en 2 filas de 5 tarjetas.

   La clase .vocabulary-upper permite adaptar el diseño
   de las tarjetas a la estructura de 5 columnas.
===================================================== */

.set-botones-container {
  margin: 20px auto;
  max-width: 1100px;
  text-align: center;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

#set-indicator {
  font-family: 'Teachers', sans-serif;
  font-size: 20px;
  font-weight: 600;
}

.set-buttons-row {
  display: flex;
  justify-content: center;
  gap: 15px;
}

.set-nav-button {
  text-decoration: none;
  background: #FFD93D;
  padding: 8px 16px;
  border-radius: 20px;
  font-weight: 600;
  color: #333;
  display: inline-block;
  width: auto;
  box-shadow: 0 3px 0 #e6c12f;
}

.set-nav-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 #e6c12f;
}

.vocabulary-section {
  --vocabulary-columns: 4;

  display: grid;
  grid-template-columns: repeat(var(--vocabulary-columns), 1fr);
  gap: 20px;
  max-width: 1100px;
  margin: 40px auto;
  text-align: center;
}

.vocabulary-upper .vocabulary-section {
  --vocabulary-columns: 5;
}

.vocabulary-card {
  background: white;
  border-radius: 20px;
  padding: 15px;
  display: block;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  transition: transform 0.2s ease;
  min-height: 245px;
}

.vocabulary-card:hover {
  transform: scale(1.03);
}

.vocabulary-image {
  width: 200px;
  max-width: 100%;
  height: auto;
  margin-bottom: 5px;
}

.structure-title {
  text-align: center;
  font-family: 'Teachers', sans-serif;
  font-size: 26px;
  margin: 10px 0 20px;
}

.icon-container {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: 8px;
}

.sound-icon,
.word-icon,
.video-icon{
  font-size: 24px;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.sound-icon:hover,
.word-icon:hover,
.video-icon:hover {
  transform: scale(1.15);
}
.hidden {
  display: none !important;
}

.vocabulary-text {
  font-size: 30px;
  font-weight: 600;
  letter-spacing: 1.5px;
  margin: 10px 0 0;
  font-family: 'Teachers', sans-serif;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.vocabulary-text.visible {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

.sound-icon.playing {
  animation: soundPulse 0.6s ease infinite;
}

@keyframes soundPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.25); }
  100% { transform: scale(1); }
}

/* TARJETAS OCULTAS (estado ?) */
.vocabulary-card.unknown {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
}

/* ❓ GRANDE Y PROTAGONISTA */
.question-mark {
  font-size: 80px;
  color: #333;
  opacity: 0.7;
}

/* OCULTAR TODO LO DEMÁS EN ESTADO UNKNOWN */
.vocabulary-card.unknown .vocabulary-image,
.vocabulary-card.unknown .icon-container,
.vocabulary-card.unknown .vocabulary-text {
 display: none;
}

/* BOTÓN PARA MEZCLAR CONTENIDOS EN TARJETAS */

.shuffle-container {
  margin: 20px auto;
  max-width: 1100px;
  text-align: center;
}

.shuffle-button {
  text-decoration: none;
  background: #31C950;
  padding: 8px 16px;
  border-radius: 20px;
  font-weight: 600;
  color: #333;
  display: inline-block;
  box-shadow: 0 3px 0 #F4A8FF;
}

.shuffle-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 #F4A8FF;
}

/* ICONOS DEL BOTÓN */

.shuffle-icon {
  font-size: 50px;
}