.left-panel {
        margin-top: 15px;
      position: absolute;
      top: 20px;
      left: 20px;
      width: 350px;
      padding: 10px 15px;
      box-sizing: border-box;
      animation: slideDown 1.5s ease forwards;
      transform: translateY(-100%);
      z-index: 10;
      text-align: center; /* Asegura que texto e imagen estén centrados */
    }

    .left-panel .welcome {
      font-size: 20px;
      font-weight: bold;
      margin-bottom: 20px;
      white-space: normal; /* Permite saltos de línea */
    }

    .left-panel .song-text {
      font-size: 14px;
      line-height: 1.5;
      margin: 6px 0;
      white-space: normal; /* Permite saltos de línea */
    }

    .left-panel .logo-container {
      margin-top: 25px;
      text-align: center;
    }

    .left-panel .logo-container img {
      max-width: 300px;
      width: 100%;
      height: auto;
      display: inline-block;
    }

    @keyframes slideDown {
      to {
        transform: translateY(0);
      }
    }

    
@media screen and (max-width: 600px) {
  .left-panel {
    position: absolute;             /* Ya no será fijo, solo visible arriba */
    top: 10px;
    left: -40px;
    width: calc(100vw - 160px);     /* Ocupa el ancho restante sin invadir el logo */
    max-width: 280px;
    padding: 5px 10px;
    text-align: center;
    white-space: normal;
    z-index: 900;
    background: transparent;
    box-sizing: border-box;
    margin-top: 5px;
  }

  .left-panel .welcome,
  .left-panel .song-text {
    font-size: 8px !important;
    margin: 3px 0;
    white-space: normal;
    line-height: 1.4;
  }

  .left-panel .logo-container img {
    max-width: 140px !important;
    height: auto;
    display: inline-block;
  }

  .logo-container {
    margin-left: 300px;
    transition: margin-left 0.3s ease;
  }

  .search-bar {
    position: relative;  /* o fixed si quieres que la barra de búsqueda se mantenga arriba */
    z-index: 1000;
  }

  .main-content {
    margin-left: 300px;
  }
}