/* 🔹 Contenedor del botón */
.button-container {
  display: flex;  /* Usa flexbox para control de alineación */
  justify-content: flex-start;  /* Alinea el botón a la izquierda */
  margin-bottom: 10px;  /* Espacio debajo del botón */
}

/* 🔹 Botón de reproducción */
.playTextButton {
  display: inline-block; /* Evita que el botón se expanda al 100% */
  padding: 8px 16px;
  font-size: 14px;
  background-color: #149ddd; /* Azul */
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  text-align: center;
  min-width: 120px; /* Evita botones demasiado pequeños */
  transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
  box-shadow: -10px 8px 5px rgba(0, 0, 0, 0.3); /* 🔥 Sombra suave */
}

/* 🔹 Efecto hover en el botón */
.playTextButton:hover {
  background-color: #1177bb; /* Azul más oscuro al pasar el mouse */
  transform: scale(1.05); /* Efecto de agrandamiento leve */
  box-shadow: -10px 8px 5px rgba(0, 0, 0, 0.4); /* Sombra más intensa */
}

/* 🔹 Estado del botón cuando está en reproducción */
.playTextButton.playing {
  background-color: #e57373; /* Rojo claro cuando está en modo STOP */
  box-shadow: 10px 8px 5px rgba(255, 0, 0, 0.5); /* Sombra rojiza cuando está en reproducción */
}

/* 🔹 Ajuste de margen para el contenido */
.articulo {
  margin-bottom: 20px;  /* Espaciado entre artículos */
}