.station-description {
    color: #fff;
    opacity: 0.6;
}
.station-img {
    border: 3px solid #ffffff00;
    padding: 0.15rem;
}
.player-artwork {
    padding: 0.75rem;
    border-radius: 1rem;
    background-color: #ffffff00;
}
.player-artwork img {
    border-radius: 0.65rem;
    box-shadow: var(--shadow-xl);
}
.player-cover-image {
    animation: bga 60s linear infinite;
}
@keyframes bga {
    50% {
        transform: scale(2);
    }
}
.items-start {
    align-items: flex-start;
    margin-top: 15px;
}
div.bg {
    position: fixed;
    z-index: 1;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: url(assets/bg.png);
}

.player-live-slot{
    width: 100%;
    display: flex;
    justify-content: center;
}

.live-badge{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 12px;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: #fff;
    background: rgba(239, 68, 68, .92);
    border: 1px solid rgba(255,255,255,.18);
    box-shadow: 0 10px 26px rgba(239, 68, 68, .22);
    animation: livePulse 1.6s ease-in-out infinite;
}

.live-badge .dot{
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: #fff;
    opacity: .92;
    box-shadow: 0 0 0 0 rgba(255,255,255,.75);
    animation: liveDot 1.6s ease-in-out infinite;
}

.live-badge.is-off{
    background: rgba(107, 114, 128, .85);
    box-shadow: none;
    animation: none;
}

.live-badge.is-off .dot{
    background: rgba(255,255,255,.75);
    animation: none;
    opacity: .6;
}

@keyframes livePulse{
    0%,100%{ transform: translateY(0); filter: saturate(1); opacity: .95; }
    50%{ transform: translateY(-1px); filter: saturate(1.25); opacity: 1; }
}

@keyframes liveDot{
    0%,100%{ box-shadow: 0 0 0 0 rgba(255,255,255,.65); }
    50%{ box-shadow: 0 0 0 10px rgba(255,255,255,0); }
}

#offcanvas-menu .offcanvas-content{
    padding-top: 10px;
}

@media (min-width: 992px){
    #offcanvas-menu.offcanvas{
        width: 440px;
        max-width: 440px;
        padding: 18px;
    }
}

#offcanvas-menu .offcanvas-content > .stations{
    width: 100%;
}

#offcanvas-menu .menu-list{
    display: grid;
    gap: 10px;
}

#offcanvas-menu .menu-detail{
    width: 100%;
}

#offcanvas-menu .menu-detail{
	max-width: 400px !important;
	margin-left: auto;
	margin-right: auto;
}

@media (min-width: 992px){
    #offcanvas-menu .menu-detail{
        max-width: 440px !important;
    }
}

#offcanvas-menu .menu-detail-head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

#offcanvas-menu .menu-detail-title{
    font-weight: 900;
    font-size: 14px;
    text-align: right;
    flex: 1;
}

#offcanvas-menu .menu-detail-actions{
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

#offcanvas-menu .menu-iframe-wrap{
    width: 100%;
    max-width: 440px !important;
    margin: 0 auto;
}

#offcanvas-menu #menu-iframe{
	max-width: 440px !important;
}

#offcanvas-menu iframe{
    width: 100% !important;
    max-width: 440px !important;
    margin: 0 auto;
    height: calc(100vh - 260px) !important;
    min-height: 420px;
    display: block;
}

#offcanvas-top #top-title,
#offcanvas-top #top-list{
    max-width: 400px !important;
    margin-left: auto;
    margin-right: auto;
}

#offcanvas-top #top-list{
    width: 100%;
}

#offcanvas-top #top-list .history-item{
    border-radius: 14px;
}

#offcanvas-top #top-list .top-item{
    display: grid;
    grid-template-columns: 26px 58px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 10px 10px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(10,10,10,0.22);
}

#offcanvas-top #top-list .top-rank{
    font-weight: 900;
    font-size: 13px;
    text-align: center;
    opacity: 0.95;
}

#offcanvas-top #top-list .top-cover img{
    width: 54px;
    height: 54px;
    border-radius: 12px;
    object-fit: cover;
    box-shadow: 0 10px 18px rgba(0,0,0,0.25);
}

#offcanvas-top #top-list .top-title{
    font-weight: 800;
    font-size: 13px;
    line-height: 1.2;
    color: rgba(255,255,255,0.95);
}

#offcanvas-top #top-list .top-artist{
    margin-top: 2px;
    font-weight: 500;
    font-size: 12px;
    opacity: 0.78;
}

#offcanvas-top #top-list .top-right{
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

#offcanvas-top #top-list .top-trend{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 22px;
    min-width: 36px;
    padding: 0 8px;
    border-radius: 999px;
    font-weight: 900;
    font-size: 11px;
    letter-spacing: .2px;
    border: 1px solid rgba(255,255,255,0.16);
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.92);
}

#offcanvas-top #top-list .top-trend.is-new{
    background: rgba(59, 130, 246, 0.18);
    border-color: rgba(59, 130, 246, 0.35);
}

#offcanvas-top #top-list .top-trend.is-up{
    background: rgba(34, 197, 94, 0.16);
    border-color: rgba(34, 197, 94, 0.35);
}

#offcanvas-top #top-list .top-trend.is-down{
    background: rgba(239, 68, 68, 0.16);
    border-color: rgba(239, 68, 68, 0.35);
}

#offcanvas-top #top-list .top-trend.is-same{
    opacity: 0.55;
}

@media (min-width: 720px){
    #offcanvas-menu iframe{
        height: calc(100vh - 240px) !important;
        min-height: 520px;
    }
}

/* TOP button: menos transparente + mejor en móvil */
#btn-top{
  --btn-bg: rgba(255,255,255,.18) !important;
  border: 1px solid rgba(255,255,255,.20) !important;
  backdrop-filter: blur(6px);
}
#btn-top:hover{
  --btn-bg: rgba(255,255,255,.26) !important;
}

@media (max-width: 575px){
  #btn-top{
    --btn-fs: 0 !important;
    --btn-gap: 0 !important;
    padding: 0.70rem !important;
  }
  #btn-top .top-label{
    display: none !important;
  }
  #btn-top .i{
    --i-size: 20px !important;
  }

  .header-logo-img{
    height: 40px !important;
    max-width: 50vw !important;
  }

  /* Enlaces de abajo ordenados (TV + Apps) */
  .mobile-menu .footer-wrapper{
    gap: 12px !important;
  }
  .mobile-menu .footer-tv,
  .mobile-menu .footer-app{
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
  }
  .mobile-menu .footer-app{
    gap: 10px !important;
  }
}

/* Nexo: redes/apps dinámicas desde el panel */
.player-social:empty { display: none !important; }
.player-social-item svg { width: var(--i-size, 20px); height: var(--i-size, 20px); display:block; }
.footer-app.nexo-footer-app {
  position: fixed;
  left: var(--main-padding, 32px);
  bottom: calc(var(--main-padding, 32px) + 36px);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: .6rem;
}
.footer-app:empty { display: none !important; }
.footer-app .player-apps-item img { display:block; height:35px; width:auto; }
@media (max-width: 991px) {
  .footer-app.nexo-footer-app { display:none !important; }
}

/* ===== Nexo Player v7: mobile premium header/sidebar ===== */
:root{
  --nexo-cover-rgb: 20, 180, 225;
  --nexo-glass: rgba(var(--nexo-cover-rgb), .42);
  --nexo-glass-strong: rgba(var(--nexo-cover-rgb), .58);
}
@media(max-width:991px){
  .mob-topbar{
    height:72px!important;
    padding:10px 22px!important;
    justify-content:center!important;
    background:linear-gradient(135deg,rgba(var(--nexo-cover-rgb),.62),rgba(12,12,22,.36))!important;
    backdrop-filter:blur(18px) saturate(1.25)!important;
    -webkit-backdrop-filter:blur(18px) saturate(1.25)!important;
    border-bottom:1px solid rgba(255,255,255,.16)!important;
    box-shadow:0 12px 38px rgba(0,0,0,.20)!important;
    transition:background .55s ease, box-shadow .55s ease!important;
  }
  .mob-topbar::after{
    content:"";
    position:absolute;inset:0;
    background:radial-gradient(circle at 50% 0%,rgba(255,255,255,.22),transparent 58%);
    pointer-events:none;
  }
  .mob-toggle{
    position:absolute!important;
    left:18px!important;
    top:15px!important;
    width:46px!important;
    height:46px!important;
    background:rgba(0,0,0,.34)!important;
    border:1px solid rgba(255,255,255,.20)!important;
    box-shadow:0 8px 24px rgba(0,0,0,.22)!important;
  }
  .mob-topbar img{
    width:auto!important;
    max-width:62%!important;
    max-height:54px!important;
    margin:0 auto!important;
    transform:translateY(1px);
    filter:drop-shadow(0 4px 10px rgba(0,0,0,.42))!important;
  }
  .player{padding-top:74px!important;}
  .mob-sidebar{
    width:292px!important;
    left:-304px!important;
    background:linear-gradient(155deg,rgba(22,21,43,.94),rgba(5,5,16,.98)),linear-gradient(135deg,rgba(var(--nexo-cover-rgb),.18),transparent 55%)!important;
    backdrop-filter:blur(22px) saturate(1.2)!important;
    -webkit-backdrop-filter:blur(22px) saturate(1.2)!important;
    box-shadow:12px 0 50px rgba(0,0,0,.45)!important;
  }
  .mob-sidebar.mob-active{left:0!important;}
  .mob-sb-head{padding:30px 22px 20px!important;background:linear-gradient(135deg,rgba(var(--nexo-cover-rgb),.22),rgba(255,255,255,.04))!important;}
  .mob-sb-head img{width:62px!important;height:62px!important;box-shadow:0 8px 22px rgba(0,0,0,.28)!important;}
  .mob-sb-head h3{font-size:16px!important;font-weight:700!important;}
  .mob-sb-nav a,.mob-sb-nav button{padding:14px 24px!important;font-size:14px!important;border-radius:14px!important;margin:0 12px!important;width:calc(100% - 24px)!important;}
  .mob-sb-badges{
    display:flex!important;
    justify-content:center!important;
    align-items:center!important;
    gap:12px!important;
    flex-wrap:nowrap!important;
    padding:16px 18px 8px!important;
  }
  .mob-badge{
    min-width:96px!important;
    justify-content:center!important;
    padding:7px 10px!important;
    border-radius:10px!important;
  }
  .mob-sb-services{justify-content:center!important;text-align:center!important;padding-bottom:14px!important;}
  .mob-footer-brand{
    margin:12px 22px 26px;
    padding:18px 12px 4px;
    border-top:1px solid rgba(255,255,255,.12);
    text-align:center;
    color:rgba(255,255,255,.78);
    font-size:11px;
    line-height:1.55;
  }
  .mob-footer-brand a{color:#fff;text-decoration:none;font-weight:700;display:inline-block;margin-top:2px;}
  .mob-footer-brand small{opacity:.86;}
}


/* Corrección definitiva: un solo scroll únicamente en escritorio. */
@media (min-width: 992px) {
  html, body {
    width: 100%;
    height: 100%;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  .app {
    width: 100% !important;
    max-width: 100%;
    height: 100vh !important;
    height: 100dvh !important;
    overflow: hidden !important;
  }
  .player {
    max-width: 100%;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }
}

/* Móvil: no bloquear el documento ni ocultar la navegación. */
@media (max-width: 991px) {
  html, body {
    width: 100%;
    min-height: 100%;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
  body.mob-menu-open {
    overflow: hidden !important;
  }
  .app {
    width: 100% !important;
    min-height: 100vh;
    min-height: 100dvh;
  }
  .mob-topbar {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 10020 !important;
  }
  .mob-toggle {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 10021 !important;
  }
  .mob-overlay { z-index: 10030 !important; }
  .mob-sidebar {
    display: block !important;
    visibility: visible !important;
    z-index: 10031 !important;
  }
  .mob-sidebar.mob-active { left: 0 !important; }
  .mob-footer-brand {
    display: block !important;
    visibility: visible !important;
  }
}

/* Footer de marca visible en escritorio */
.desktop-footer-brand {
  display: none;
}
@media (min-width: 992px) {
  .desktop-footer-brand {
    position: fixed;
    left: var(--main-padding, 32px);
    bottom: var(--main-padding, 24px);
    z-index: 70;
    display: block;
    color: #fff;
    font-family: Montserrat, sans-serif;
    font-size: 12px;
    line-height: 1.35;
    text-shadow: 0 2px 8px rgba(0,0,0,.75);
  }
  .desktop-footer-brand a {
    color: #fff;
    font-weight: 700;
    text-decoration: none;
  }
  .desktop-footer-brand a:hover {
    text-decoration: underline;
  }
}


/* Footer de escritorio estable - 2026-07-22 */
@media (min-width: 992px) {
  body > #desktop-footer-brand.desktop-footer-brand {
    position: fixed !important;
    left: 24px !important;
    bottom: 18px !important;
    top: auto !important;
    right: auto !important;
    z-index: 2147483000 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 8px 12px !important;
    border-radius: 10px !important;
    background: rgba(0,0,0,.32) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
}
@media (max-width: 991px) {
  #desktop-footer-brand { display: none !important; }
}


/* Historial y paneles laterales en móvil - revisión 20260722-2 */
@media (max-width: 991px) {
  #offcanvas-history,
  #offcanvas-top,
  #offcanvas-menu {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    width: min(92vw, 390px) !important;
    max-width: 390px !important;
    height: 100vh !important;
    height: 100dvh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    z-index: 10050 !important;
    -webkit-overflow-scrolling: touch;
  }
  #offcanvas-history.is-active,
  #offcanvas-top.is-active,
  #offcanvas-menu.is-active {
    transform: translateX(0) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
  #offcanvas-history .offcanvas-content {
    min-height: calc(100dvh - 70px);
    padding-bottom: 32px;
  }
  #offcanvas-history #history {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}