/* WachYa navegación universal */
:root {
  --wachya-focus: #edb1ff;
  --wachya-focus-soft: rgba(237,177,255,.34);
}

#wachyaPlaybackTransition {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: #fff;
  background: rgba(10, 6, 11, .94);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .16s ease, visibility .16s ease;
}

#wachyaPlaybackTransition.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

#wachyaPlaybackTransition strong { font-size: clamp(22px, 3vw, 34px); }
#wachyaPlaybackTransition span { color: #d1c2d2; font-size: 16px; }
.wachya-playback-loader-ring {
  width: 64px;
  height: 64px;
  border: 6px solid rgba(237, 177, 255, .18);
  border-top-color: #edb1ff;
  border-radius: 50%;
  animation: wachya-loader-spin .8s linear infinite;
}
@keyframes wachya-loader-spin { to { transform: rotate(360deg); } }

.wachya-install-app {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 180;
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 0 20px;
  border: 1px solid rgba(237,177,255,.55);
  border-radius: 999px;
  background: linear-gradient(135deg,#edb1ff,#ffb0cc);
  color: #520070;
  font-weight: 900;
  box-shadow: 0 14px 38px rgba(0,0,0,.45);
}

html {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

body {
  overscroll-behavior: contain;
}

/* Modo TV: pensado para control remoto, distancia de lectura y formato 16:9. */
html.wachya-tv-mode,
body.wachya-tv-mode {
  min-width: 960px;
  background: #120c13;
  scroll-behavior: auto;
}

body.wachya-tv-mode {
  font-size: 18px;
}

body.wachya-tv-mode main,
body.wachya-tv-mode .wachya-rail,
body.wachya-tv-mode .overflow-x-auto,
body.wachya-tv-mode .overflow-y-auto {
  scroll-behavior: auto !important;
}

body.wachya-tv-mode .watch-card,
body.wachya-tv-mode a,
body.wachya-tv-mode button {
  transition-duration: 80ms !important;
}

body.wachya-tv-mode.music-performance main section {
  content-visibility: visible !important;
  contain: none !important;
}

body.wachya-tv-mode #sidebar {
  width: 92px !important;
  padding-top: 28px !important;
  padding-bottom: 28px !important;
  z-index: 160 !important;
  transition: none !important;
}

body.wachya-tv-mode.wachya-nav-intent #sidebar:focus-within {
  width: 300px !important;
}

body.wachya-tv-mode:not(.wachya-nav-intent) #sidebar:focus-within {
  width: 92px !important;
}

body.wachya-tv-mode:not(.wachya-nav-intent) #sidebar:focus-within .group-hover\:opacity-100,
body.wachya-tv-mode:not(.wachya-nav-intent) #sidebar .group-hover\:opacity-100 {
  opacity: 0 !important;
}

body.wachya-tv-mode:not(.wachya-nav-intent) #sidebar a:focus,
body.wachya-tv-mode:not(.wachya-nav-intent) #sidebar a:focus-visible {
  outline: 0 !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

body.wachya-tv-mode.wachya-nav-intent #sidebar .group-hover\:opacity-100 {
  opacity: 1 !important;
}

body.wachya-tv-mode main {
  margin-left: 92px !important;
  scroll-padding-top: 112px;
  scroll-padding-bottom: 80px;
}

body.wachya-tv-mode header.fixed {
  left: 92px !important;
}

body.wachya-tv-mode .px-margin-desktop {
  padding-left: clamp(52px, 4vw, 88px) !important;
  padding-right: clamp(52px, 4vw, 88px) !important;
}

body.wachya-tv-mode .watch-card {
  width: clamp(180px, 12vw, 230px) !important;
  min-width: clamp(180px, 12vw, 230px) !important;
  max-width: 230px !important;
  border-radius: 16px !important;
}

body.wachya-tv-mode .watch-card h4 {
  font-size: 17px;
  line-height: 1.2;
}

body.wachya-tv-mode .wachya-focusable:focus,
body.wachya-tv-mode .wachya-focusable:focus-visible,
body.wachya-tv-mode a:focus-visible,
body.wachya-tv-mode button:focus-visible,
body.wachya-tv-mode [role="button"]:focus-visible,
body.wachya-tv-mode input:focus-visible {
  outline: 5px solid #fff3fd !important;
  outline-offset: 6px !important;
  box-shadow: 0 0 0 10px rgba(237,177,255,.7), 0 16px 50px rgba(0,0,0,.65) !important;
  transform: scale(1.07);
  z-index: 170 !important;
}

body.wachya-tv-mode .wachya-install-app,
body.wachya-tv-mode .wachya-mobile-menu-button,
body.wachya-tv-mode .wachya-menu-scrim {
  display: none !important;
}

body.wachya-tv-mode #tvPlayer:focus,
body.wachya-tv-mode #tvPlayer:focus-visible {
  outline: 6px solid #edb1ff !important;
  outline-offset: -6px !important;
  box-shadow: inset 0 0 0 10px rgba(237,177,255,.28), 0 0 35px rgba(237,177,255,.55) !important;
  transform: none !important;
}

body.wachya-tv-mode #tvPlayerFrame:fullscreen,
body.wachya-tv-mode #tvPlayerFrame:-webkit-full-screen {
  width: 100vw;
  height: 100vh;
  background: #000;
}

body.wachya-tv-mode #tvPlayerFrame:fullscreen #tvPlayer,
body.wachya-tv-mode #tvPlayerFrame:-webkit-full-screen #tvPlayer {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

body.wachya-tv-mode.wachya-tv-live #tvLiveLayout {
  grid-template-columns: 250px 390px minmax(0, 1fr) !important;
  contain: layout paint;
}

body.wachya-tv-mode.wachya-tv-live #tvCategoryPane,
body.wachya-tv-mode.wachya-tv-live #tvChannelPane {
  contain: layout paint;
}

body.wachya-tv-mode.wachya-tv-live .tv-group:focus,
body.wachya-tv-mode.wachya-tv-live .channel-row:focus,
body.wachya-tv-mode.wachya-tv-live #channelSearch:focus,
body.wachya-tv-mode.wachya-tv-live #tvPlayer:focus {
  transform: none !important;
  outline-width: 4px !important;
  outline-offset: -4px !important;
  box-shadow: inset 0 0 0 3px rgba(237,177,255,.65), 0 0 18px rgba(237,177,255,.3) !important;
  z-index: 2 !important;
}

body.wachya-tv-mode.wachya-tv-live .channel-row {
  min-height: 70px;
  content-visibility: auto;
  contain-intrinsic-size: 70px;
}

/* Inicio musical para TV: hero amplio, accesos horizontales y filas tipo Spotify. */
body.wachya-tv-mode.music-performance main {
  padding-bottom: 132px !important;
}

body.wachya-tv-mode.music-performance .music-search-bar {
  padding: 24px clamp(52px, 4vw, 88px) !important;
  background: linear-gradient(180deg, rgba(18,12,19,.96), rgba(18,12,19,.15));
}

body.wachya-tv-mode.music-performance .music-search-bar > div {
  max-width: 620px !important;
}

body.wachya-tv-mode.music-performance main > section:first-of-type {
  height: 48vh !important;
  min-height: 390px !important;
  padding-left: clamp(52px, 4vw, 88px) !important;
  padding-right: clamp(52px, 4vw, 88px) !important;
}

body.wachya-tv-mode.music-performance .music-home-content {
  margin-top: 0 !important;
  gap: 34px !important;
}

body.wachya-tv-mode.music-performance .music-source-panel {
  display: none !important;
}

body.wachya-tv-mode.music-performance .music-section-trends { order: 1; }
body.wachya-tv-mode.music-performance .music-section-made-for-you { order: 2; }
body.wachya-tv-mode.music-performance .music-section-playlists { order: 3; }
body.wachya-tv-mode.music-performance .music-section-favorites { order: 4; }
body.wachya-tv-mode.music-performance .music-section-history { order: 5; }
body.wachya-tv-mode.music-performance .music-home-content > section:not(.music-section-trends):not(.music-section-made-for-you):not(.music-section-playlists):not(.music-section-favorites):not(.music-section-history) { order: 6; }

body.wachya-tv-mode.music-performance main > div > section h2 {
  font-size: clamp(25px, 1.8vw, 34px) !important;
}

body.wachya-tv-mode.music-performance #musicQuickGrid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 18px !important;
}

body.wachya-tv-mode.music-performance [data-music-size="large"],
body.wachya-tv-mode.music-performance [data-music-album],
body.wachya-tv-mode.music-performance [data-music-genre],
body.wachya-tv-mode.music-performance [data-music-playlist] {
  width: clamp(190px, 13vw, 250px) !important;
  min-width: clamp(190px, 13vw, 250px) !important;
  max-width: 250px !important;
}

body.wachya-tv-mode.music-performance #musicMiniPlayer {
  left: 92px !important;
}

body.wachya-tv-mode.music-performance:not(.music-tv-player) #musicMiniPlayer {
  left: 120px !important;
  right: auto !important;
  top: 24px !important;
  bottom: auto !important;
  width: 430px !important;
  border: 1px solid rgba(237,177,255,.28) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  background: rgba(31,26,33,.96) !important;
}

body.wachya-tv-mode.music-performance:not(.music-tv-player) #musicMiniPlayer > div {
  min-height: 82px;
  padding: 10px 14px !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
}

body.wachya-tv-mode.music-performance:not(.music-tv-player) #musicMiniPlayer > div > div:first-child {
  width: auto !important;
  flex: 1 !important;
}

body.wachya-tv-mode.music-performance:not(.music-tv-player) #musicMiniPlayer > div > div:nth-child(2) {
  flex: none !important;
}

body.wachya-tv-mode.music-performance:not(.music-tv-player) #musicMiniPlayer > div > div:nth-child(2) > div:last-child,
body.wachya-tv-mode.music-performance:not(.music-tv-player) #musicMiniPlayer > div > div:last-child,
body.wachya-tv-mode.music-performance:not(.music-tv-player) #miniPlayerPrev,
body.wachya-tv-mode.music-performance:not(.music-tv-player) #miniPlayerNext,
body.wachya-tv-mode.music-performance:not(.music-tv-player) #wachyaYoutubeShell {
  display: none !important;
}

body.wachya-tv-mode.music-performance:not(.music-tv-player) #miniPlayerPlay {
  width: 48px !important;
  height: 48px !important;
}

body.wachya-tv-mode.music-tv-player #musicMiniPlayer {
  left: 92px !important;
}

.wachya-focusable,
a,
button,
[role="button"],
input,
select,
textarea {
  outline: none;
}

.wachya-focusable:focus,
.wachya-focusable:focus-visible,
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--wachya-focus);
  outline-offset: 4px;
  box-shadow: 0 0 0 7px var(--wachya-focus-soft), 0 0 30px rgba(237,177,255,.32);
  border-color: rgba(237,177,255,.82) !important;
  z-index: 20;
}

.watch-card:focus,
.watch-card:focus-visible {
  transform: translateY(-8px) scale(1.035);
}

.wachya-rail {
  scroll-behavior: smooth;
  scroll-padding-inline: 24px;
  overscroll-behavior-inline: contain;
  touch-action: pan-x pan-y;
  cursor: grab;
}

.wachya-rail.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  user-select: none;
}

@media (pointer: coarse) {
  .watch-card,
  .wachya-focusable {
    min-height: 48px;
  }

  button, a, [role="button"], input, select { min-height: 48px; }
  input[type="range"] { min-height: 36px; }
}

@media (max-width: 768px) {
  body { padding-bottom: 0; }

  main {
    scroll-padding-top: 84px;
    margin-left: 0 !important;
    padding-bottom: max(32px, env(safe-area-inset-bottom)) !important;
    width: 100% !important;
  }

  .wachya-rail {
    scroll-padding-inline: 16px;
    -webkit-overflow-scrolling: touch;
  }

  #sidebar {
    position: fixed !important;
    left: 0 !important;
    right: auto !important;
    top: 0 !important;
    bottom: 0 !important;
    width: min(82vw, 310px) !important;
    height: 100dvh !important;
    padding: 78px 14px 24px !important;
    transform: translateX(-105%);
    flex-direction: column !important;
    overflow-y: auto !important;
    border-right: 1px solid rgba(78,67,80,.8) !important;
    border-top: 0 !important;
    background: rgba(18,12,19,.985) !important;
    transition: transform .24s ease !important;
  }

  body.wachya-menu-open #sidebar { transform: translateX(0); }
  body.wachya-menu-open { overflow: hidden; }

  #sidebar::-webkit-scrollbar { display: none; }
  #sidebar > div { display: block; }
  #sidebar > div > div:first-child { display: none !important; }
  #sidebar ul { flex-direction: column !important; align-items: stretch !important; gap: 2px !important; }
  #sidebar li { display: block; }
  #sidebar a.nav-item {
    width: 100%; min-width: 0; min-height: 50px;
    padding: 12px 14px !important; flex-direction: row !important;
    justify-content: flex-start !important; gap: 14px !important;
    border-left: 3px solid transparent !important; border-top: 0;
    border-radius: 14px;
  }
  #sidebar a.nav-item.active { border-left-color: var(--wachya-focus) !important; background: rgba(157,80,187,.22); }
  #sidebar a.nav-item > span:last-child { display: inline !important; opacity: 1 !important; }
  #sidebar a.nav-item .material-symbols-outlined { font-size: 25px; }

  .px-margin-desktop { padding-left: 16px !important; padding-right: 16px !important; }
  [class*="text-[76px]"], [class*="text-[64px]"] { font-size: clamp(36px, 11vw, 58px) !important; }
  .content-card { max-width: 100%; }
  .wachya-install-app { right: 14px; bottom: calc(18px + env(safe-area-inset-bottom)); }
  .h-\[870px\] { height: auto !important; min-height: 680px !important; padding-top: 120px !important; padding-bottom: 110px !important; }
  .min-h-screen { min-height: calc(100dvh - 68px); }
  video, iframe { max-width: 100%; }
  button, a { -webkit-user-select: none; user-select: none; }
}

/* Navegación inferior en todas las secciones. Música conserva el cajón
   lateral porque su reproductor utiliza el borde inferior. */
@media (max-width: 768px) {
  body:not(.music-performance) .wachya-mobile-menu-button,
  body:not(.music-performance) .wachya-menu-scrim { display: none !important; }

  body:not(.music-performance) #sidebar {
    left: 0 !important; right: 0 !important; top: auto !important; bottom: 0 !important;
    width: 100% !important; height: calc(68px + env(safe-area-inset-bottom)) !important;
    padding: 0 8px env(safe-area-inset-bottom) !important; transform: none !important;
    flex-direction: row !important; align-items: stretch !important; justify-content: flex-start !important;
    overflow-x: auto !important; overflow-y: hidden !important; border-right: 0 !important;
    border-top: 1px solid rgba(78,67,80,.7) !important; z-index: 150 !important;
  }
  body:not(.music-performance) #sidebar > div { display: contents; }
  body:not(.music-performance) #sidebar ul { flex-direction: row !important; align-items: stretch !important; flex-shrink: 0; }
  body:not(.music-performance) #sidebar li { display: flex; }
  body:not(.music-performance) #sidebar a.nav-item {
    width: 62px; min-width: 62px; min-height: 62px; padding: 9px 6px !important;
    flex-direction: column !important; justify-content: center !important; gap: 2px !important;
    border-left: 0 !important; border-top: 3px solid transparent !important; border-radius: 12px 12px 0 0;
  }
  body:not(.music-performance) #sidebar a.nav-item.active { border-top-color: var(--wachya-focus) !important; }
  body:not(.music-performance) #sidebar a.nav-item > span:last-child { display: none !important; }
  body:not(.music-performance) main { padding-bottom: max(96px, env(safe-area-inset-bottom)) !important; }

  body.music-performance #sidebar { z-index: 220 !important; }
  body.music-performance.wachya-menu-open #sidebar,
  body.music-performance #sidebar.wachya-mobile-open { transform: translateX(0) !important; }
  body.music-performance .wachya-mobile-menu-button { z-index: 230 !important; }
  body.music-performance .wachya-menu-scrim { z-index: 210 !important; }
  body.music-performance.wachya-menu-open .music-search-bar {
    opacity: 0;
    pointer-events: none !important;
  }
}

.wachya-mobile-menu-button { display: none; }
@media (max-width: 768px) {
  .wachya-mobile-menu-button {
    display: grid; position: fixed; left: 14px; top: max(14px, env(safe-area-inset-top));
    z-index: 160; width: 48px; height: 48px; place-items: center;
    border-radius: 16px; border: 1px solid rgba(237,177,255,.4);
    background: rgba(18,12,19,.9); color: #fff; backdrop-filter: blur(14px);
    box-shadow: 0 10px 30px rgba(0,0,0,.38);
  }
  .wachya-menu-scrim { display: none; position: fixed; inset: 0; z-index: 145; background: rgba(0,0,0,.62); }
  body.wachya-menu-open .wachya-menu-scrim { display: block; }
}

@media (min-width: 1000px) and (hover: none), (min-width: 1200px) and (pointer: coarse) {
  .wachya-focusable:focus, a:focus-visible, button:focus-visible, [role="button"]:focus-visible {
    outline-width: 4px;
    outline-offset: 6px;
    transform: scale(1.045);
  }
  button, a, [role="button"] { scroll-margin: 110px; }
}


#sidebar:focus-within {
  width: 260px !important;
}

#sidebar:focus-within .group-hover\:opacity-100 {
  opacity: 1 !important;
}

#sidebar:focus-within .group-hover\:border-primary {
  border-color: #edb1ff !important;
}

/* Flechas laterales para PC en carruseles horizontales */
.wachya-rail-wrap {
  position: relative;
}

.wachya-rail-arrow {
  display: none;
  position: absolute;
  top: calc(50% + 16px);
  transform: translateY(-50%);
  z-index: 35;
  width: 46px;
  height: 74px;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border: 1px solid rgba(237,177,255,.36);
  background: linear-gradient(145deg, rgba(36,30,37,.94), rgba(18,12,19,.88));
  color: #fff3fd;
  box-shadow: 0 16px 42px rgba(0,0,0,.42), 0 0 22px rgba(237,177,255,.16);
  backdrop-filter: blur(14px);
  cursor: pointer;
  transition: opacity .18s ease, transform .18s ease, border-color .18s ease, background .18s ease;
}

.wachya-rail-arrow:hover,
.wachya-rail-arrow:focus-visible {
  transform: translateY(-50%) scale(1.06);
  border-color: rgba(237,177,255,.82);
  background: linear-gradient(145deg, rgba(157,80,187,.92), rgba(255,69,161,.76));
}

.wachya-rail-arrow:disabled {
  opacity: .25;
  pointer-events: none;
}

.wachya-rail-arrow-left {
  left: -22px;
}

.wachya-rail-arrow-right {
  right: -22px;
}

.wachya-rail-arrow .material-symbols-outlined {
  font-size: 34px;
  font-variation-settings: 'FILL' 1;
}

@media (min-width: 769px) {
  .has-scrollable-rail > .wachya-rail-arrow:not([hidden]) {
    display: flex;
  }
}

@media (max-width: 768px) {
  .wachya-rail-arrow {
    display: none !important;
  }
}