/* Noches de Pelucheo — header (logo izq. | player + altavoz der.) */

.GlobalHeader .Container {
  position: relative;
  height: calc(10.25rem * 0.97) !important; /* zona header −3% */
  min-height: 0;
}

/* --------------------------------------------------------------------------
   Logo — izquierda del todo, franja superior del header (+2% abajo)
   -------------------------------------------------------------------------- */
.GlobalHeader-logoLink,
.GlobalHeader-smallLogoLink {
  position: absolute;
  left: calc(1rem + 7%) !important; /* −3% izquierda */
  right: auto !important;
  top: calc(1.248rem * 1.05 * 1.05 * 0.97) !important;
  bottom: auto !important;
  width: auto !important;
  max-width: none !important;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  transform: none !important;
  -webkit-transform: none !important;
  z-index: 25;
  pointer-events: auto;
  background: transparent !important;
  box-shadow: none !important;
}

.GlobalHeader-logoLink .ndp-logo--header,
.GlobalHeader-smallLogoLink .ndp-logo--header {
  display: block;
  width: auto;
  height: calc(3.15rem * 0.97);
  max-width: calc(12.6rem * 0.97);
  max-height: calc(3.15rem * 0.97);
  margin: 0;
  object-fit: contain;
  object-position: left center;
  background: transparent !important;
  filter: none;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  image-rendering: auto;
}

/* --------------------------------------------------------------------------
   Reproductor — derecha (mismas dimensiones)
   -------------------------------------------------------------------------- */
.GlobalHeader .Player {
  position: absolute !important;
  left: auto !important;
  right: 3.25rem !important; /* hueco para la lupa de búsqueda */
  top: calc(1.15rem * 0.97) !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: calc(0.45rem * 0.97) !important;
  width: auto !important;
  max-width: min(27.1rem, calc(52.3vw - 4rem)) !important;
  min-width: 0 !important;
  overflow: visible !important;
  z-index: 10;
}

.GlobalHeader .Player .Player-ctaButton svg {
  width: calc(2.95rem * 0.97) !important;
  height: calc(2.95rem * 0.97) !important;
}

.GlobalHeader .Player .Player-coverImageContainer .SquareImage,
.GlobalHeader .Player .Player-coverImage {
  width: calc(4.1rem * 0.97) !important;
  max-width: calc(4.1rem * 0.97) !important;
}

.GlobalHeader .Player .Player-meta {
  flex: 1 1 auto;
  min-width: 0;
  padding-top: 0.1rem;
  text-align: left;
}

.GlobalHeader .Player .Player-title,
.GlobalHeader .Player .Player-album,
.GlobalHeader .Player .Player-show {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.GlobalHeader .Player .Player-title-line,
.GlobalHeader .Player .Player-album-line,
.GlobalHeader .Player .Player-show-line {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Altavoz — derecha, junto al bloque del reproductor
   -------------------------------------------------------------------------- */
.PlayerControlTray {
  left: auto !important;
  right: 1rem !important;
  z-index: 11;
}

.PlayerControlTray .PlayerControlTray-toggle {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  width: auto !important;
  min-width: 0;
  height: calc(2rem * 0.97) !important;
  padding: calc(0.25rem * 0.97) calc(0.5rem * 0.97) !important;
  border-radius: 6px !important;
  border-width: 1px !important;
}

.PlayerControlTray .PlayerControlTray-toggle svg {
  width: 1rem !important;
  height: 1rem !important;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Desktop ≥900px
   -------------------------------------------------------------------------- */
@media screen and (min-width: 900px) {
  .GlobalHeader .Container {
    height: calc(11.7rem * 0.97) !important;
  }

  .GlobalHeader-logoLink,
  .GlobalHeader-smallLogoLink {
    top: calc(1.352rem * 1.05 * 1.05 * 0.97) !important;
    left: calc(1rem + 7%) !important;
    transform: none !important;
    -webkit-transform: none !important;
  }

  .GlobalHeader-logoLink .ndp-logo--header,
  .GlobalHeader-smallLogoLink .ndp-logo--header {
    height: calc(3.52rem * 0.97);
    max-height: calc(3.52rem * 0.97);
    max-width: calc(13.15rem * 0.97);
  }

  .GlobalHeader .Player {
    top: calc(1.3rem * 0.97) !important;
    right: 3.25rem !important;
    max-width: min(30.7rem, calc(46.9vw - 4rem)) !important;
  }

  .GlobalHeader-searchButton {
    top: calc(1.65rem * 0.97) !important;
    right: 1rem !important;
  }

  .PlayerControlTray {
    top: auto !important;
    bottom: calc(1.15rem * 0.97) !important;
    right: 1rem !important;
    left: auto !important;
  }

  .PlayerControlTray .PlayerControlTray-content {
    right: 0 !important;
    left: auto !important;
    transform: none !important;
  }

  .GlobalHeader .PrimaryNav {
    left: 1rem !important;
    bottom: calc(1.1rem * 0.97) !important;
  }

  .GlobalHeader .SecondaryNav {
    right: 5.5rem !important;
    bottom: calc(1.5rem * 0.97) !important;
    max-width: calc(100% - 20rem);
  }
}

/* Footer */
.ndp-logo--footer {
  display: block;
  width: auto;
  height: 2.5rem;
  max-width: 9rem;
  margin: 0 auto;
  object-fit: contain;
  background: transparent;
  filter: none;
}

/* --------------------------------------------------------------------------
   Tablet / móvil
   -------------------------------------------------------------------------- */
@media (max-width: 899px) {
  .GlobalHeader .Container {
    height: calc(10.25rem * 0.97) !important;
  }

  .GlobalHeader-logoLink,
  .GlobalHeader-smallLogoLink {
    top: calc(0.676rem * 1.05 * 1.05 * 0.97) !important;
    left: calc(0.75rem + 7%) !important;
    transform: none !important;
    -webkit-transform: none !important;
  }

  .GlobalHeader-logoLink .ndp-logo--header,
  .GlobalHeader-smallLogoLink .ndp-logo--header {
    height: calc(2.78rem * 0.97);
    max-height: calc(2.78rem * 0.97);
    max-width: calc(11rem * 0.97);
  }

  .GlobalHeader .Player {
    top: calc(0.75rem * 0.97) !important;
    left: auto !important;
    right: 0.75rem !important;
    max-width: min(23.5rem, calc(100% - 9rem)) !important;
  }

  .PlayerControlTray {
    top: auto !important;
    bottom: calc(1rem * 0.97) !important;
    right: 0.75rem !important;
    left: auto !important;
  }

  .GlobalHeader .PrimaryNav {
    left: 0.75rem !important;
    bottom: calc(1rem * 0.97) !important;
  }

  .GlobalHeader .SecondaryNav {
    right: 5rem !important;
    bottom: calc(1rem * 0.97) !important;
  }

  .PlayerControlTray .PlayerControlTray-content {
    right: 0 !important;
    left: auto !important;
  }
}

@media (max-width: 600px) {
  .GlobalHeader .Player {
    max-width: min(20rem, calc(100% - 8rem)) !important;
    right: 0.5rem !important;
  }

  .GlobalHeader-logoLink .ndp-logo--header,
  .GlobalHeader-smallLogoLink .ndp-logo--header {
    height: calc(2rem * 0.97);
    max-height: calc(2rem * 0.97);
    max-width: calc(7.5rem * 0.97);
  }

  .GlobalHeader .Player .Player-ctaButton svg {
    width: calc(2.45rem * 0.97) !important;
    height: calc(2.45rem * 0.97) !important;
  }

  .GlobalHeader .Player .Player-coverImageContainer .SquareImage,
  .GlobalHeader .Player .Player-coverImage {
    width: calc(3.35rem * 0.97) !important;
    max-width: calc(3.35rem * 0.97) !important;
  }
}