/* ═══════════════════════════════════════════════════════
   NAVBAR — Barra de navegación superior clásica
   ═══════════════════════════════════════════════════════ */

/* ─── Navbar principal ─── */
.navbar {
  position: sticky;
  top: 0;
  width: 100%;
  height: var(--navbar-height, 64px);
  background-color: var(--bg-primary);
  z-index: calc(var(--z-modal, 1000) + 20);
  border-bottom: 1px solid var(--border-light);
  transition: background-color var(--transition-normal);
  isolation: isolate;
}

.navbarInner {
  display: flex;
  align-items: center;
  height: 100%;
  max-width: 1800px;
  margin: 0 auto;
  padding: 0 var(--content-padding, 24px);
  gap: 12px;
}

/* ─── Logo ─── */
.logoSection {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.logoLink {
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: transform var(--transition-normal);
}

.logoLink:hover {
  transform: scale(1.04);
}

.logoLink img {
  width: 104px;
  height: 104px;
  border-radius: var(--radius-md);
  object-fit: contain;
}

.logoOscuro { display: block; }
.logoClaro { display: none; }
:global(.light-theme) .logoOscuro { display: none; }
:global(.light-theme) .logoClaro { display: block; }

/* ─── Navegación principal (desktop) ─── */

.navLinks {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}


.navItem {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 7px 12px;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: var(--font-size-base);
  font-weight: 450;
  border-radius: var(--radius-md);
  transition: all var(--transition-normal);
  white-space: nowrap;
  position: relative;
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
}

.navItem:hover {
  color: var(--text-primary);
}

.navItem.active {
  color: var(--color-primary);
  background-color: transparent;
  font-weight: 600;
}

.navItem.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 2px;
  background-color: var(--color-primary);
  border-radius: 1px;
}

.navItemIcon {
  display: flex;
  align-items: center;
  font-size: 18px;
}

.navItemText {
  font-size: var(--font-size-base);
}

/* ─── Menú Más (dropdown) ─── */
.moreMenu {
  position: relative;
  display: flex;
  align-items: center;
}

.moreDropdown {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 8px;
  background-color: var(--bg-elevated);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 6px;
  min-width: 180px;
  z-index: calc(var(--z-modal, 1000) + 21);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.moreDropdownItem {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: var(--font-size-base);
  font-weight: 450;
  border-radius: var(--radius-md);
  transition: all var(--transition-normal);
  white-space: nowrap;
}

.moreDropdownItem:hover {
  color: var(--text-primary);
  background-color: var(--bg-hover);
}

.moreDropdownItem.active {
  color: var(--color-primary);
  font-weight: 600;
}

.moreDropdownItem ion-icon {
  font-size: 18px;
}

/* ─── Buscador ─── */
.searchSection {
  flex: 1;
  max-width: 550px;
  min-width: 0;
  margin-left: auto;
}

.searchForm {
  display: flex;
  align-items: center;
  border-radius: var(--radius-full);
  padding: 0;
  border: 1px solid var(--border-light);
  transition: all var(--transition-normal);
  width: 100%;
  position: relative;
  background: rgba(58, 58, 58, 0.07);
  box-shadow: none;
}

.searchInput {
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-size: var(--font-size-base);
  font-weight: 400;
  padding: 10px 8px 10px 36px;
  flex: 1;
  outline: none;
  width: 100%;
  letter-spacing: 0.2px;
  border-radius: var(--radius-full);
  box-shadow: none;
}

.searchInput:focus {
  outline: 1px solid #5a5a5a7b;
  outline-offset: 0px;
  box-shadow: none;
}

.searchIcon {
  color: var(--text-tertiary);
  font-size: 1.2em;
  margin-left: 12px;
  margin-right: -28px;
  pointer-events: none;
  transition: color 0.2s;
  align-self: center;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.searchSubmit {
  display: flex;
  align-items: center;
  gap: 4px;
  background-color: var(--color-primary);
  border: none;
  color: #ffffff;
  font-size: var(--font-size-sm);
  font-weight: 500;
  padding: 8px 14px;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all var(--transition-normal);
  position: relative;
  flex-shrink: 0;
}

.searchSubmit:hover {
  filter: brightness(1.1);
  transform: scale(1.02);
}

.searchSubmit ion-icon {
  font-size: 14px;
}

.searchSubmit span {
  font-size: var(--font-size-sm);
}

.clearButton {
  background: none;
  border: none;
  color: var(--text-tertiary);
  font-size: 1.2em;
  margin: 0 10px 0 0;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}

.clearButton:hover {
  color: var(--color-primary);
}

/* Spinner de búsqueda */
.searchSpinner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-primary);
  border-radius: var(--radius-full);
  z-index: 2;
}

.searchSpinner::after {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: #fff;
  border-left-color: #fff;
  animation: spin 0.8s linear infinite;
}

.searchSpinner ~ span,
.searchSpinner ~ ion-icon {
  opacity: 0;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ─── Acciones (derecha) ─── */
.actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.iconBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  border-radius: 50%;
  color: var(--text-secondary);
  font-size: 18px;
  cursor: pointer;
  transition: all var(--transition-normal);
}

.iconBtn:hover {
  color: var(--text-primary);
  background-color: var(--bg-hover);
}

.mobileSearchBtn {
  display: none;
}

/* ─── Botones auth ─── */
.registerBtn {
  padding: 7px 16px;
  border-radius: var(--radius-full);
  color: var(--text-primary);
  font-size: var(--font-size-base);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-normal);
}

.registerBtn:hover {
  color: var(--color-primary);
  transform: scale(1.03);
}

.loginBtn {
  padding: 7px 18px;
  border-radius: var(--radius-full);
  background-color: var(--color-primary);
  color: #ffffff;
  font-size: var(--font-size-base);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-normal);
}

.loginBtn:hover {
  filter: brightness(1.1);
  transform: scale(1.03);
}

/* ─── User menu ─── */
.userMenu {
  position: relative;
  display: flex;
  align-items: center;
  z-index: 1;
}

.userTrigger {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 4px;
  border-radius: var(--radius-full);
  transition: all var(--transition-normal);
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-light);
  appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
}

.userTrigger:hover,
.userMenu[data-open="true"] .userTrigger {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

.userAvatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--color-primary);
  transition: all var(--transition-normal);
}

.userTrigger:hover .userAvatar,
.userMenu[data-open="true"] .userAvatar {
  transform: scale(1.05);
}

/* Dropdown */
.dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 260px;
  background-color: var(--bg-secondary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  z-index: calc(var(--z-modal, 1000) + 21);
  overflow: hidden;
  animation: dropdownIn 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border: 1px solid var(--border-light);
  transform-origin: top right;
}

@keyframes dropdownIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.dropdownHeader {
  padding: 14px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--border-subtle);
  background: linear-gradient(135deg, rgba(0, 106, 255, 0.08), transparent);
}

.dropdownAvatar {
  margin-right: 10px;
}

.dropdownAvatar img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--color-primary);
}

.dropdownInfo {
  overflow: hidden;
  flex: 1;
}

.dropdownName {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dropdownEmail {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dropdownDivider {
  height: 1px;
  background: var(--border-subtle);
}

.dropdownList {
  list-style: none;
  padding: 6px 0;
  margin: 0;
}

.dropdownAction {
  display: flex;
  align-items: center;
  padding: 10px 14px;
  color: var(--text-primary);
  font-size: var(--font-size-base);
  transition: all var(--transition-fast);
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  font-weight: 500;
  font-family: inherit;
  gap: 10px;
}

.dropdownAction:hover {
  background-color: var(--bg-hover);
  color: var(--color-primary);
  padding-left: 18px;
}

.dropdownAction ion-icon {
  font-size: 16px;
  color: var(--color-primary);
}

/* ─── Now Playing indicator ─── */
.nowPlaying {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 12px;
  /* border-radius: var(--radius-md); */
  /* background-color: var(--bg-secondary); */
}

.equalizerBars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 14px;
}

.equalizerBars span {
  width: 2px;
  background-color: var(--color-primary);
  border-radius: 1px;
  animation: equalizer 0.8s ease-in-out infinite;
}

.equalizerBars span:nth-child(1) { height: 6px; animation-delay: 0s; }
.equalizerBars span:nth-child(2) { height: 10px; animation-delay: 0.15s; }
.equalizerBars span:nth-child(3) { height: 14px; animation-delay: 0.3s; }
.equalizerBars span:nth-child(4) { height: 10px; animation-delay: 0.45s; }
.equalizerBars span:nth-child(5) { height: 6px; animation-delay: 0.6s; }

@keyframes equalizer {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(1.8); }
}

/* ─── Menú hamburguesa (solo móvil) ─── */
.menuBtn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  border-radius: 50%;
  color: var(--text-secondary);
  font-size: 20px;
  cursor: pointer;
  transition: all var(--transition-normal);
}

.menuBtn.active {
  background: var(--bg-hover);
  color: var(--text-primary);
}

/* ─── Panel de navegación móvil ─── */
.mobileNav {
  display: none;
  position: fixed;
  top: var(--navbar-height-mobile, 56px);
  left: 0;
  right: 0;
  background-color: var(--bg-primary);
  border-bottom: 1px solid var(--border-light);
  padding: 8px var(--content-padding-mobile, 16px);
  z-index: calc(var(--z-navbar, 900) - 1);
  animation: slideDown 0.2s ease;
  box-shadow: var(--shadow-lg);
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.mobileNavLinks {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mobileNavItem {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: var(--font-size-base);
  font-weight: 450;
  border-radius: var(--radius-md);
  transition: all var(--transition-normal);
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
  width: 100%;
  text-align: left;
}

.mobileNavItem:hover {
  color: var(--text-primary);
}

.mobileNavItem.active {
  color: var(--color-primary);
  background-color: transparent;
  font-weight: 600;
}

.mobileNavItemIcon {
  display: flex;
  align-items: center;
  font-size: 20px;
}

.mobileBackdrop {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: calc(var(--z-navbar, 900) - 2);
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ─── Search Panel (móvil fullscreen) ─── */
.searchPanel {
  position: fixed;
  inset: 0;
  background-color: var(--bg-primary);
  z-index: calc(var(--z-modal) + 1);
  display: flex;
  justify-content: center;
  animation: fadeIn 0.2s ease;
}

.searchPanelContent {
  width: 90%;
  max-width: 600px;
  padding: 40px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.searchPanelHeader {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 24px;
  text-align: center;
}

.searchPanelLogo {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}

.logoMobileOscuro {
  display: block;
  border-radius: var(--radius-lg);
  animation: pulseAnimation 2s infinite ease-in-out;
}

.logoMobileClaro {
  display: none;
  border-radius: var(--radius-lg);
  animation: pulseAnimation 2s infinite ease-in-out;
}

:global(.light-theme) .logoMobileOscuro { display: none; }
:global(.light-theme) .logoMobileClaro { display: block; }

@keyframes pulseAnimation {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.searchPanelTitle {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.nowPlayingIndicator {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.searchPanelForm {
  width: 100%;
  display: flex;
  align-items: center;
  background-color: var(--bg-tertiary);
  border-radius: var(--radius-lg);
  padding: 12px 16px;
  border: 1px solid var(--border-light);
  transition: all var(--transition-normal);
  position: relative;
}

.searchPanelForm:focus-within {
  border-color: var(--color-primary);
}

.searchPanelInput {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-size: var(--font-size-md);
  font-weight: 400;
  outline: none;
  letter-spacing: 0.3px;
}

.searchPanelInput::placeholder {
  color: var(--text-tertiary);
}

.searchPanelSubmit {
  background-color: var(--color-primary);
  border: none;
  color: #ffffff;
  font-size: var(--font-size-base);
  font-weight: 500;
  padding: 8px 16px;
  border-radius: var(--radius-full);
  cursor: pointer;
  margin-left: 8px;
  transition: all var(--transition-normal);
}

.searchPanelSubmit:hover {
  filter: brightness(1.1);
}

.searchPanelClose {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 22px;
  cursor: pointer;
  padding: 4px;
  margin-left: 8px;
  transition: transform var(--transition-normal);
}

.searchPanelClose:hover {
  transform: rotate(90deg);
}

.searchOverlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: var(--z-modal);
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-normal);
}

.searchOverlay.active {
  opacity: 1;
  visibility: visible;
}

/* Estilos para botón presionado */
.buttonPressed {
  transform: scale(0.96) !important;
}

/* ─── Anuncios container ─── */
.adContainer {
  display: none; /* Los anuncios ya no van en el sidebar */
}

/* ─── Desktop Only helper ─── */
.desktopOnly {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ─── Mobile Tab Bar ─── */
.mobileTabBar {
  display: none;
}

.mobileTabScroll {
  display: flex;
  align-items: center;
  gap: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0 var(--content-padding-mobile, 16px);
}

.mobileTabScroll::-webkit-scrollbar {
  display: none;
}

.mobileTab {
  flex-shrink: 0;
  padding: 10px 16px;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: var(--font-size-base);
  font-weight: 450;
  white-space: nowrap;
  position: relative;
  transition: color var(--transition-normal);
}

.mobileTab:hover {
  color: var(--text-primary);
}

.mobileTabActive {
  color: var(--text-primary);
  font-weight: 600;
}

.mobileTabActive::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 2px;
  background-color: var(--text-primary);
  border-radius: 1px;
}

/* ─── Mobile Drawer extras ─── */
.mobileNavDivider {
  height: 1px;
  background: var(--border-light);
  margin: 4px 14px;
}

.mobileUserSection {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 14px;
  border-bottom: 1px solid var(--border-light);
}

.mobileUserAvatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--color-primary);
}

.mobileUserInfo {
  overflow: hidden;
  flex: 1;
}

.mobileUserName {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobileUserEmail {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ═══════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════ */

@media screen and (max-width: 1024px) {
  .navItemText {
    display: none;
  }
  
  .navItem {
    padding: 8px 10px;
  }
  
  .searchSection {
    max-width: 360px;
  }
}

@media screen and (max-width: 768px) {
  .navbar {
    height: var(--navbar-height-mobile, 56px);
    padding: 0 var(--content-padding-mobile, 16px);
  }

  .navbarInner {
    padding: 0;
  }

  .navLinks {
    display: none;
  }
  
  .menuBtn {
    display: flex;
  }
  
  .mobileNav.open {
    display: block;
  }

  .searchSection {
    display: none;
  }

  .mobileSearchBtn {
    display: flex;
  }

  .desktopOnly {
    display: none;
  }

  .mobileTabBar {
    display: block;
    background-color: var(--bg-primary);
    border-bottom: 1px solid var(--border-light);
    position: sticky;
    top: var(--navbar-height-mobile, 56px);
    z-index: calc(var(--z-modal, 1000) + 19);
  }

  .registerBtn {
    padding: 6px 14px;
    font-size: var(--font-size-sm);
  }
  
  .loginBtn {
    padding: 6px 14px;
    font-size: var(--font-size-sm);
  }
  
  .userTrigger {
    width: 38px;
    height: 38px;
    justify-content: center;
    padding: 3px;
    border-radius: 50%;
  }
  
  .userAvatar {
    width: 28px;
    height: 28px;
  }
  
  .dropdown {
    width: 240px;
    right: -8px;
  }
}

@media screen and (max-width: 576px) {
  .registerBtn {
    padding: 5px 12px;
    font-size: var(--font-size-xs);
  }
  
  .loginBtn {
    padding: 5px 14px;
    font-size: var(--font-size-xs);
  }

  .iconBtn {
    width: 32px;
    height: 32px;
    font-size: 16px;
  }
}

@media screen and (max-width: 360px) {
  .loginBtn {
    padding: 5px 10px;
    font-size: 11px;
  }
  
  .dropdown {
    width: 200px;
  }
}