:root {
  --primario: #8e19e7;
  --secundario: #f5116198;
  --texto: #2d2d2d;
  --gris: #5858c944;
  --gris-suave: #e5e5e5;
  --acento: #f70f60;
  --borde: #7c0cf3;
  --sombra: 0 8px 32px rgba(124,58,173,0.12);
}

body {
  min-height: 100vh;
  font-family: 'Segoe UI', Arial, sans-serif;
  color: var(--texto);
  margin: 0;
  padding: 0;
  background: #fff;
}

/* Contenedor flex para mantener al lado */
.contenedor {
  display: flex;
  flex-wrap: nowrap;      /* No hacer wrap en escritorio */
  justify-content: center;
  align-items: stretch;
  gap: 24px;
  padding: 32px 16px;
  margin: 0 auto;
  max-width: 960px;
  box-sizing: border-box;
}

/* Tarjetas */
.reproductor-musica,
.info-extra {
  flex: 1 1 340px;
  max-width: 440px;
  background: var(--gris);
  border-radius: 18px;
  padding: 32px 24px;
  box-shadow: 0 4px 24px rgba(124,58,173,0.08);
  border: 2px solid var(--borde);
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: box-shadow 0.2s, border 0.2s;
}

/* Bordes de colores */
.reproductor-musica {
  border-left: 6px solid var(--primario);
}
.info-extra {
  border-right: 6px solid var(--secundario);
}

/* Contenido del reproductor */
.reproductor-musica h1 {
  font-size: 2.2rem;
  color: var(--primario);
  margin-bottom: 10px;
  text-align: center;
  font-weight: 700;
}
.reproductor-musica p {
  font-size: 1.15rem;
  color: var(--acento);
  margin-bottom: 28px;
  text-align: center;
  font-weight: 500;
}

/* Barra de progreso */
#progreso {
  appearance: none;
  width: 100%;
  height: 12px;
  background: linear-gradient(90deg, #f81a67 0%, #8e19e7 100%);
  border-radius: 12px;
  margin: 35px 0 25px;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(124,58,173,0.13), 0 1.5px 8px #f81a6744;
  outline: none;
}
#progreso::-webkit-slider-thumb {
  appearance: none;
  background: radial-gradient(circle at 60% 40%, #fff 40%, #f81a67 100%);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 4px 16px #8e19e7aa, 0 0 0 4px #f81a6744;
  transition: transform 0.2s;
}
#progreso:active::-webkit-slider-thumb {
  transform: scale(1.15);
}

/* Controles */
.controles {
  display: flex;
  gap: 22px;
  justify-content: center;
}
.controles button {
  width: 56px;
  height: 56px;
  background: var(--primario);
  color: #fff;
  border: none;
  border-radius: 50%;
  font-size: 2rem;
  cursor: pointer;
  transition: 0.2s;
}
.controles button:hover {
  background: #eb8221;
  transform: scale(1.13);
}

/* Info extra */
.info-extra h2 {
  font-size: 2rem;
  color: var(--primario);
  margin-bottom: 18px;
  text-align: center;
  font-weight: 700;
}
.info-extra p {
  font-size: 1.13rem;
  color: var(--texto);
  opacity: 0.95;
  text-align: center;
  font-weight: 500;
}

/* Menú lateral fijo */
.selector-podcast {
  position: fixed;
  top: 50%;
  left: 18px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 14px;
  z-index: 10;
  background: transparent; /* Por si se quiere */
}
.selector-podcast button {
  padding: 14px 24px;
  background: var(--primario);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 1.08rem;
  cursor: pointer;
  transition: 0.2s;
}
 .selector-podcast button.active,
        .selector-podcast button:hover {
            background: var(--secundario);
            color: #fff;
            font-weight: bold;
            border: 2px solid var(--primario);
            transform: scale(1.09);
            box-shadow: 0 4px 16px rgba(233,64,122,0.13);
        }

/* RESPONSIVO */

@media (max-width: 900px) {
    .selector-podcast {
        position: static;
                flex-direction: row;
                justify-content: center;
                margin: 18px 0;
                top: unset; left: unset; transform: none; }
}


@media (max-width: 600px) {
  /* Apilar las tarjetas en columna */
  .contenedor {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    padding: 8px 2px;
    margin: 10px 2px;
  }

  .reproductor-musica,
  .info-extra {
    width: 100%;
    max-width: 100%;
    padding: 12px 4px;
    border-radius: 10px;
    margin: 0 auto 12px;
  }

  /* Menú lateral pasa a fondo fijo abajo y horizontal */
  .selector-podcast {
    top: auto;
    bottom: 10px;
    left: 10px;
    transform: none;
    flex-direction: row;
    padding: 8px;
    border-radius: 12px;
    gap: 10px;
    width: auto;
  }

  .selector-podcast button {
    font-size: 0.93rem;
    padding: 6px 10px;
  }

  .controles button {
    width: 44px;
    height: 44px;
    font-size: 1.3rem;
  }
}