/*.player {*/
/*  padding: 1vw;*/
/*}*/


/*.player-cover-image {*/
/*  ;*/
/*  animation: bga 60s linear infinite;*/
/*}*/

/*@keyframes bga {*/
/*  50% {*/
/*    transform: scale(2)*/
/*  }*/
/*}*/

/*.items-start {*/
/*  align-items: flex-start;*/
/*  margin-top: 15px;*/
/*}*/

.player-button {
  font-weight: 700;
}

.player-program {

  background-image: linear-gradient(transparent, rgb(0 0 0 / 98%));

}

.player-program-badge {
  font-weight: 700;

}

/* Color del header - Solo en móvil */
@media (max-width: 991px) {
  .header {
    background: linear-gradient(135deg, #ff0000, #cc0000, #990000) !important;
    box-shadow: var(--shadow-l);
  }
}

/* En desktop mantener transparente */
@media (min-width: 992px) {
  .header {
    background: transparent !important;
  }
}

/* Maximizar el tamaño del logo del header */
.header-logo-img {
  height: 60px !important; /* Aumentar de 40px a 60px en móvil */
  max-height: 60px !important;
  width: auto !important;
}

/* En desktop, hacer el logo aún más grande */
@media (min-width: 992px) {
  .header-logo-img {
    max-height: 8vw !important; /* Aumentar de 5vw a 8vw */
    height: auto !important;
    width: auto !important;
  }
}

/* En pantallas muy grandes, limitar el tamaño máximo */
@media (min-width: 1200px) {
  .header-logo-img {
    max-height: 120px !important; /* Límite máximo de 120px */
  }
}

/* Controlar el tamaño del logo en pantallas de escritorio pequeñas */
@media (min-width: 992px) and (max-width: 1199px) {
  .header-logo-img {
    max-height: 80px !important; /* Límite para pantallas medianas */
  }
}

/* Controlar el logo en pantallas de escritorio muy pequeñas */
@media (min-width: 992px) and (max-width: 1024px) {
  .header-logo-img {
    max-height: 60px !important; /* Límite para pantallas pequeñas de escritorio */
  }
}

/* Asegurar que el logo no se monte sobre el cover */
@media (min-width: 992px) {
  .header-logo {
    z-index: 10 !important; /* Asegurar que esté por encima del cover */
  }
  
  .player-artwork {
    margin-top: 80px !important; /* Espacio para el logo */
  }
  
  /* En pantallas muy pequeñas de escritorio, más espacio */
  @media (max-width: 1024px) {
    .player-artwork {
      margin-top: 100px !important; /* Más espacio para pantallas pequeñas */
    }
  }
}