/* ======================================== 
   Estilo General del Formulario 
   ======================================== */
/* Contenedor principal del formulario */
.form-container {
  width: 100%;
  max-width: 900px;
  margin: 50px auto;
  padding: 20px;
  background-color: #212028; /* Fondo oscuro para contrastar con el texto claro */
  border-radius: 10px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); /* Sombra sutil para crear profundidad */
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
}

/* Estilo del título principal */
h2 {
  text-align: center;
  color: #d4af37; /* Dorado para resaltar el título */
  font-size: 2.2em;
  margin-bottom: 20px;
}

/* Estilo de los párrafos informativos */
p {
  font-size: 1.2em;
  margin-bottom: 20px;
  font-weight: 200;
  color: rgb(234, 233, 233); /* Color suave para no desentonar con el fondo oscuro */
}

/* ======================================== 
   Ajustes de Espaciado y Organización 
   ======================================== */
/* Estilo global para el formulario */
form {
  padding: 20px;
  width: 100%;
}

/* ======================================== 
   Estilo para los Botones
   ======================================== */
/* Estilo del botón de envío */
button[type="submit"] {
  background-color: #d4af37; /* Dorado para destacar el botón */
  color: white;
  font-size: 1.4em;
  padding: 15px 30px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease; /* Efecto de transición para el hover */
  width: 100%;
  text-align: center;
  margin-top: 20px;
}

/* Estilo al pasar el cursor sobre el botón de envío */
button[type="submit"]:hover {
  background-color: #a7871e; /* Dorado oscuro para el hover */
}

/* Estilo del botón adicional */
button[type="button"] {
  background-color: gold;
  color: white;
  font-size: 1.5em; /* Tamaño de fuente más grande para destacar */
  padding: 14px 30px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
  width: 100%;
  text-align: center;
  margin-bottom: 20px; /* Espacio entre botones */
}

/* Efecto al pasar el cursor sobre el botón adicional */
button[type="submit"]:hover,
button[type="button"]:hover {
  background-color: #b88a00; /* Dorado oscuro para el hover */
}

/* Cambio de color para el texto del botón adicional */
button[type="button"] {
  color: #003366; /* Azul muy oscuro para contrastar con el dorado */
  margin-top: 10px; /* Espacio entre botones */
}

/* ======================================== 
   Estilo para los Botones de Radio 
   ======================================== */
/* Contenedor para los botones de radio */
.radio-group {
  display: flex;
  justify-content: space-around;
  gap: 20px; /* Espaciado entre botones */
  margin-bottom: 20px;
}

/* Estilo de cada botón de radio */
.radio-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 30px;
  background-color: #302e39; /* Fondo oscuro */
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease; /* Transición para hover y escala */
  width: 23%;
  text-align: center;
}

/* Estilo del texto dentro del botón de radio */
.radio-button .button-text {
  font-size: 1.2em;
  color: rgb(224, 224, 224); /* Texto claro para contraste */
  font-weight:500;
}

/* Ocultar los inputs de los botones de radio */
.radio-button input {
  display: none;
  margin-bottom: 10px; /* Espacio debajo de las etiquetas */
}

/* Efecto al pasar el cursor sobre los botones de radio */
.radio-button:hover {
  background-color: rgb(220, 187, 0); /* Dorado cuando se pasa el cursor */
  transform: scale(1.1); /* Escala ligeramente el botón */
}

/* ======================================== 
   Secciones de Género (Pop, Regueton, Rap)
   ======================================== */
/* Estilo inicial para las secciones de género, ocultas por defecto */
.genre-section {
  transform: scale(0.95); /* Escala reducida */
  opacity: 0; /* Oculta la sección */
  transition: transform 0.5s ease, opacity 0.5s ease; /* Transición suave para la aparición */
  display: none; /* No se muestra inicialmente */
}

/* Estilo cuando la clase 'show' se aplica, haciendo visible la sección */
.genre-section.show {
  transform: scale(1); /* Escala normal */
  opacity: 1; /* Hacerla visible */
  display: block; /* Mostrar la sección */
}

/* ======================================== 
   Estilo del Rango con Transición
   ======================================== */
/* Estilo de la barra de rango */
#level {
  width: 100%;
  transition: background 0.2s ease; /* Transición suave en el cambio de fondo */
}

/* Estilo del título de la sección de género */
.genre-section h3 {
  color: gold; /* Color dorado para los títulos */
  font-size: 1.5em;
  margin-bottom: 10px;
}

/* Estilo de las etiquetas dentro de las secciones de género */
.genre-section label {
  display: block;
  margin-bottom: 10px;
}

/* Estilo general de las etiquetas */
label{
  font-size: 1.1em;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  color: rgb(206, 206, 206); /* Color suave para las etiquetas */
  margin-bottom: 10px; /* Espacio debajo de las etiquetas */
}

/* Estilo del área de texto dentro de las secciones de género */
.genre-section textarea {
  width: 100%;
  height: 100px;
  padding: 10px;
  border: 1px solid #444; /* Borde oscuro */
  border-radius: 5px;
  background-color: #333; /* Fondo oscuro para el área de texto */
  color: white;
  margin-bottom: 15px; /* Espacio debajo de las etiquetas */
}

/* ======================================== 
   Estilo para la Barra de Rango
   ======================================== */
/* Estilo de la barra de rango */
input[type="range"] {
  width: 100%;
  height: 8px;
  border-radius: 5px;
  background: #444;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  transition: background 0.3s ease;
  background-image: linear-gradient(to right, #ffd700 0%, #ffd700 50%, #444 50%, #444 100%);
  margin-bottom: 10px; /* Espacio debajo de las etiquetas */
}

/* Estilo de la barra de rango al pasar el cursor */
input[type="range"]:hover {
  background: #555;
}

/* Estilo de la pista del control de rango */
input[type="range"]::-webkit-slider-runnable-track,
input[type="range"]::-moz-range-track {
  background: #444; /* Fondo oscuro de la pista */
}

/* ======================================== 
   Estilo del "Thumb" (Manija) del Slider 
   ======================================== */
/* Personalización del "thumb" en navegadores Webkit (Chrome, Safari) y Mozilla */
input[type="range"]::-webkit-slider-thumb,
input[type="range"]::-moz-range-thumb {
  -webkit-appearance: none; /* Elimina el estilo predeterminado del navegador */
  appearance: none;
  width: 22px; /* Establece el tamaño del control deslizante */
  height: 22px;
  border-radius: 50%; /* Forma circular para el thumb */
  background: gold; /* Color dorado para el thumb */
  cursor: pointer; /* Cambia el cursor al pasar por encima */
  transition: background 0.3s ease; /* Transición suave para el cambio de color */
}

/* Estilo cuando el slider está en foco */
input[type="range"]:focus {
  background: #666; /* Cambia el fondo del slider al tener el foco */
}

/* ======================================== 
   Estilo para el Campo de Fecha
   ======================================== */
/* Personalización del campo de entrada de fecha */
input[type="date"] {
  background-color: #333; /* Fondo oscuro para el campo */
  color: white; /* Texto en blanco */
  border: 1px solid #444; /* Borde gris oscuro */
  padding: 10px; /* Espaciado interno */
  border-radius: 5px; /* Bordes redondeados */
  margin-bottom: 10px; /* Espacio debajo del campo */
}

/* Estilo del campo de fecha cuando está en foco */
input[type="date"]:focus {
  border-color: gold; /* Borde dorado al hacer foco */
  outline: none; /* Elimina el contorno por defecto */
  background-color: #444; /* Fondo ligeramente más claro */
}

/* ======================================== 
   Ajustes para Dispositivos Móviles
   ======================================== */
/* Modificaciones de diseño para pantallas pequeñas */
@media (max-width: 768px) {
  .form-container {
    padding: 15px; /* Reducir el padding para pantallas pequeñas */
  }

  h2 {
    font-size: 1.8em; /* Disminuir tamaño de fuente del título */
  }

  .radio-group {
    flex-direction: column; /* Organiza los botones de radio en columna */
    gap: 15px; /* Espaciado ajustado entre botones */
  }

  button[type="submit"] {
    font-size: 1em; /* Disminuir tamaño de fuente del botón */
  }
  .radio-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 15px 30px;
    background-color: #302e39; /* Fondo oscuro */
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease; /* Transición para hover y escala */
    width: 100%;
    text-align: center;
  }

  label{
    font-size: 1.3em;
  }

  .radio-button .button-text {
    font-size: 1em;
    color: rgb(224, 224, 224); /* Texto claro para contraste */
    font-weight:500;
  }
}

/* ======================================== 
   Estilo del Slider y Nivel
   ======================================== */
/* Contenedor del slider con propiedades para personalizar su apariencia */
.slider {
  --slider-width: 100%;
  --slider-height: 6px;
  --slider-bg: #444; /* Fondo oscuro para la barra */
  --slider-border-radius: 999px; /* Bordes redondeados */
  --level-color: gold; /* Color dorado para el nivel */
  --level-transition-duration: .1s; /* Duración de la transición */
}

/* Configuración de estilo para la barra de nivel */
.slider {
  cursor: pointer;
  display: inline-flex;
  flex-direction: row-reverse;
  align-items: center;
}

/* Estilo del nivel (barra de progreso) */
.slider .level {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: var(--slider-width);
  height: var(--slider-height);
  background: var(--slider-bg);
  overflow: hidden;
  border-radius: var(--slider-border-radius);
  -webkit-transition: height var(--level-transition-duration);
  transition: height var(--level-transition-duration);
  cursor: inherit;
}

/* Estilo del "thumb" (manija) en la barra de nivel */
.slider .level::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px; /* Tamaño del thumb */
  height: 20px;
  border-radius: 50%; /* Forma circular */
  background: gold; /* Color dorado para el thumb */
  border: none;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); /* Sombra suave para mejorar la visibilidad */
  transition: background 0.3s ease; /* Transición suave de color */
}

/* Estilo del "thumb" en Firefox */
.slider .level::-moz-range-thumb {
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: gold;
  border: none;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  transition: background 0.3s ease;
}

/* Efecto hover sobre el slider */
.slider:hover .level {
  height: calc(var(--slider-height) * 2); /* Aumenta la altura cuando se pasa el cursor */
}

/* Estilo cuando el slider tiene el foco */
.slider .level:focus::-webkit-slider-thumb,
.slider .level:focus::-moz-range-thumb {
  background-color: #b88a00; /* Color dorado más oscuro cuando está en foco */
}