:root{
            --bg:#111111;
            --card:#171717;
            --border:#3a3a3a;
            --text:#ffffff;
            --muted:#b4b4b4;
            --muted2:#8d8d8d;
            --accent:#a8afb9;
            --radius:16px;
            --gap-right:6px;
            --link:#1cb700;

            --onair-width: 360px;
            --marquee-char-limit: 72;
            --banner-gap: 14px;
            --banner-speed: 14s;
          }

          *{ box-sizing:border-box; }
          body{
            margin:0;
            background:var(--bg);
            color:var(--text);
            font-family:"Helvetica Now",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
          }

          .page{ max-width: 1080px; margin:0 auto; padding: 18px 14px 28px; }

          /* ===== Header ===== */
          .topbar{
            position: sticky;
            top: 0;
            z-index: 50;
            background: rgba(17,17,17,.78);
            -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
            border-bottom: 1px solid rgba(255,255,255,.08);
            border-radius: 14px;
            padding: 12px 14px;
            margin-bottom: 14px;
          }
          .topbar-links{ display:flex; gap:10px; flex-wrap:wrap; }
          .topbar-link{
            color: rgba(255,255,255,.86);
            text-decoration:none;
            font-size:12px;
            padding:6px 10px;
            border-radius: 10px;
            border:1px solid rgba(255,255,255,.10);
            background: rgba(255,255,255,.04);
          }
          .topbar-link:hover{ border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.06); }

          .brand{ display:flex; align-items:center; gap:12px; margin-top: 10px; min-width:0; }
          .brand-logo{ border-radius: 12px; border:1px solid rgba(255,255,255,.10); background:#0f0f0f;  width: clamp(160px, 38vw, 220px); height: auto; max-width: 100%; display:block; flex:0 0 auto;}
          .brand-title{ font-weight: 800; letter-spacing: .6px; font-size: clamp(16px, 4.2vw, 23px); min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
          .brand-sub{ display:flex; gap:8px; flex-wrap:wrap; margin-top: 6px; }

          /* sxm-badge (base) y pills iguales */
          .pill, .sxm-badge, .sxm-pill{
            background: rgba(255,255,255,.08);
            border: 1px solid rgba(255,255,255,.14);
            color: #dcdcdc;
            font-size: 11px;
            padding: 3px 8px;
            border-radius: 8px;
            letter-spacing: .2px;
            line-height: 15px;
            display:inline-flex;
            align-items:center;
            gap:6px;
            white-space:nowrap;
          }

          /* ===== Grid ===== */
          .grid{ display:grid; gap:12px; }

          /* ===== Channel Card Strip ===== */
          .sxm-strip{
            display:grid;
            grid-template-columns:112px 1fr minmax(240px,var(--onair-width));
            gap:16px;
            align-items:center;
            padding:14px 16px;
            background:var(--card);
            border:1px solid var(--border);
            border-radius:var(--radius);
          }

          .sxm-strip__img{
            width:112px; height:112px;
            border-radius:12px;
            overflow:hidden;
            display:block;
            background:#0f0f0f;
            position:relative;
          }
          .sxm-strip__img img{ width:100%; height:100%; object-fit:cover; display:block; border:0; }

          /* Hover PLAY overlay */
          .sxm-strip__img::before{
            content:"";
            position:absolute; left:0; top:0; right:0; bottom:0;
            background: rgba(0,0,0,.35);
            opacity:0;
            transition: opacity .18s ease;
            z-index:2;
          }
          .sxm-strip__img::after{
            content:"";
            position:absolute;
            left:50%; top:50%;
            transform: translate(-50%,-50%) scale(.96);
            width:54px; height:54px;
            border-radius:999px;
            background: rgba(255,255,255,.14);
            border: 1px solid rgba(255,255,255,.22);
            box-shadow: 0 10px 26px rgba(0,0,0,.35);
            opacity:0;
            transition: opacity .18s ease, transform .18s ease, background .18s ease, border-color .18s ease;
            z-index:3;
          }
          .sxm-play-tri{
            position:absolute;
            left:50%; top:50%;
            transform: translate(-42%,-50%) scale(.96);
            width:0; height:0;
            border-top:10px solid transparent;
            border-bottom:10px solid transparent;
            border-left:16px solid rgba(255,255,255,.92);
            opacity:0;
            transition: opacity .18s ease, transform .18s ease;
            z-index:4;
            pointer-events:none;
          }
          .sxm-strip__img:hover::before{ opacity:1; }
          .sxm-strip__img:hover::after{
            opacity:1;
            transform: translate(-50%,-50%) scale(1);
            background: rgba(255,255,255,.18);
            border-color: rgba(255,255,255,.28);
          }
          .sxm-strip__img:hover .sxm-play-tri{
            opacity:1;
            transform: translate(-42%,-50%) scale(1);
          }

          .sxm-strip__text{ min-width:0; }

          .sxm-strip__headline{
            display:flex;
            align-items:center;
            gap:10px;
            font-size:14px;
            line-height:18px;
            font-weight:600;
            min-width:0;
          }
          .sxm-strip__ch{ color:var(--muted); letter-spacing:.2px; white-space:nowrap; }
          .sxm-strip__dot{ width:4px; height:4px; border-radius:999px; background:var(--muted2); display:inline-block; flex:0 0 auto; }

          .sxm-strip__title{
            color:var(--text);
            text-decoration:none;
            white-space:nowrap;
            overflow:hidden;
            text-overflow:ellipsis;
            max-width:100%;
            min-width:0;
          }
          .sxm-strip__title:hover{ color:var(--accent); }

          .sxm-strip__sub{
            margin-top:4px;
            font-size:13px;
            line-height:17px;
            color: rgba(180,180,180,.92);

            /* ✅ evita deformación */
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 100%;
            min-width: 0;
          }

          .sxm-strip__desc{
            margin-top:6px;
            font-size:13px;
            line-height:17px;
            color: rgba(214,214,214,.92);
            white-space:nowrap;
            overflow:hidden;
            min-width:0;
            max-width:100%;
            position:relative;
          }

          .sxm-strip__meta{
            margin-top:8px;
            display:flex;
            align-items:center;
            gap:10px;
            min-width:0;
            flex-wrap:wrap;
          }

          .sxm-strip__link{
            display:inline-flex;
            align-items:center;
            gap:6px;
            font-size:12px;
            line-height:15px;
            color:var(--link);
            text-decoration:none;
            text-shadow: 0 0 8px rgba(28,183,0,.18);
            white-space:nowrap;
            max-width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
          
            flex: 0 0 100%;
          }
          .sxm-strip__link:hover{ text-decoration:underline; filter:brightness(1.1); }

          .sxm-link-ico{ width:14px; height:14px; display:inline-block; fill: currentColor; opacity:.9; flex:0 0 auto; }

          .sxm-pills{ display:inline-flex; align-items:center; gap:8px; min-width:0; flex-wrap:wrap; 
            flex: 0 0 auto;
            max-width: 100%;
          }
          .sxm-pill b{ font-weight:600; color:#dcdcdc; }

          /* Right group */
          .sxm-right{
            display:flex;
            align-items:flex-start;
            gap: var(--gap-right);
            justify-content:flex-start;
            min-width:0;
            width:100%;
            padding-top:2px;
          }
          .sxm-mid{ display:flex; align-items:center; gap:14px; flex:0 0 auto; }
          .sxm-divider{ width:1px; height:44px; background:var(--border); opacity:.85; flex:0 0 auto; }

          .sxm-mini{
            width:98px; height:98px;
            border-radius:14px;
            overflow:hidden;
            background:#0f0f0f;
            border:1px solid var(--border);
            flex:0 0 auto;
          }
          .sxm-mini{
            transition: transform .18s ease, box-shadow .18s ease;
          }
          .sxm-mini img.js-mini-cover{
            width:100%;
            height:100%;
            object-fit:cover;
            display:block;
            border:0;
            opacity:1;
            transform: scale(1.08);
            transform-origin: 50% 50%;
            filter: grayscale(100%);
            transition: transform .18s ease, filter .18s ease;
          }
          .sxm-mini:hover{
            transform: scale(1.06);
          }
          .sxm-mini:hover img.js-mini-cover{
            transform: scale(1.10);
            filter: grayscale(0%);
          }
            transform: scale(1.08); transform-origin: 50% 50%;
            filter: grayscale(1);
            transition: opacity .18s ease, transform .18s ease, filter .18s ease;
            will-change: opacity, transform, filter;
          }
          .sxm-mini:hover img.js-mini-cover{ transform: scale(1.11); filter: grayscale(0); }

          .sxm-onair{ text-decoration:none; color:var(--text); display:block; min-width:0; max-width:100%; 
            flex: 1 1 auto;
            min-width: 230px;
          }
          .sxm-onair__row{
            display:flex;
            align-items:center;
            gap:8px;
            justify-content:flex-start;
            color:var(--muted);
            font-size:12px;
            line-height:15px;
            white-space:nowrap;
            margin-top:1px;
          }

          .sxm-eq{
            display:inline-flex;
            align-items:flex-end;
            gap:2px;
            width:14px;
            height:12px;
            margin-left:2px;
            opacity:.9;
          }
          .sxm-eq span{
            width:2px;
            height:6px;
            background:var(--muted2);
            border-radius:2px;
            animation: sxmEq .9s ease-in-out infinite;
          }
          .sxm-eq span:nth-child(2){ animation-delay:.15s; height:10px; }
          .sxm-eq span:nth-child(3){ animation-delay:.3s; height:8px; }
          @keyframes sxmEq{
            0%,100%{ transform:scaleY(.55); opacity:.7; }
            50%{ transform:scaleY(1); opacity:1; }
          }

          /* Infinite banner (solo cuando corresponde) */
          .sxm-banner{ overflow:hidden; white-space:nowrap; position:relative; min-width:0; }
          .sxm-banner__track{ display:flex; width:max-content; will-change: transform; }
          .sxm-banner__group{ display:inline-flex; align-items:center; gap:var(--banner-gap); padding-right:var(--banner-gap); }
          .sxm-banner.is-banner .sxm-banner__track{ animation: bannerScroll var(--banner-speed) linear infinite; }
          .sxm-strip__desc.sxm-banner.is-hover .sxm-banner__track{ animation:none; }
          .sxm-strip__desc.sxm-banner.is-hover:hover .sxm-banner__track{ animation: bannerScroll var(--banner-speed) linear infinite; }

          @keyframes bannerScroll{
            0%{ transform: translateX(0); }
            100%{ transform: translateX(-50%); }
          }
          .sxm-sep{ display:inline-block; opacity:.85; }

          .sxm-onair__show{
            margin-top:6px;
            font-size:13px;
            line-height:17px;
            color:var(--text);
            white-space:nowrap;
            overflow:hidden;
            min-width:0;
            max-width:100%;
          }


          /* Action buttons (under ON AIR) */
          .sxm-actions{
            margin-top:10px;
            display:flex;
            gap:10px;
            align-items:center;
          }
          .sxm-action{
            width:34px;
            height:34px;
            border-radius:11px;
            display:inline-flex;
            align-items:center;
            justify-content:center;
            background: rgba(255,255,255,.05);
            border: 1px solid rgba(255,255,255,.11);
            text-decoration:none;
            transition: transform .16s ease, background .16s ease, border-color .16s ease, filter .16s ease;
            user-select:none;
          }
          .sxm-action__ico{
            width:18px;
            height:18px;
            display:block;
            filter: grayscale(1) saturate(0) brightness(.95);
            opacity:.92;
            transition: transform .16s ease, filter .16s ease, opacity .16s ease;
            will-change: transform, filter;
          }
          .sxm-action:hover{
            transform: scale(1.12);
            background: rgba(255,255,255,.09);
            border-color: rgba(255,255,255,.18);
          }
          .sxm-action:hover .sxm-action__ico{
            filter: none;
            opacity: 1;
            transform: scale(1.06);
          }
          .sxm-action:active{
            transform: scale(1.06);
          }

          /* Embedded ultra-basic player */
          .playerbar{
            position: fixed;
            left: 14px;
            right: 14px;
            bottom: 14px;
            z-index: 120;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:12px;
            padding:10px 12px;
            background: rgba(20,20,20,.78);
            border: 1px solid rgba(255,255,255,.12);
            border-radius: 14px;
            -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
            box-shadow: 0 18px 50px rgba(0,0,0,.45);

            /* ✅ inicia invisible; aparece solo cuando hay reproducción */
            opacity: 0;
            transform: translateY(12px);
            pointer-events: none;
            transition: opacity .18s ease, transform .18s ease;
          }
          .playerbar.is-visible{
            opacity: 1;
            transform: translateY(0);
            pointer-events: auto;
          }
          .playerbar__left{
            min-width:0;
            display:flex;
            align-items:center;
            gap:10px;
          }
          .playerbar__dot{
            width:8px;
            height:8px;
            border-radius:999px;
            background: rgba(28,183,0,.95);
            box-shadow: 0 0 14px rgba(28,183,0,.22);
            flex:0 0 auto;
            opacity:.0;
            transition: opacity .16s ease;
          }
          .playerbar.is-playing .playerbar__dot{ opacity:1; }

          .playerbar__title{
            font-size:12px;
            line-height:15px;
            color: rgba(255,255,255,.86);
            white-space:nowrap;
            overflow:hidden;
            text-overflow:ellipsis;
            max-width: 55vw;
          }

          .playerbar__btns{
            display:flex;
            align-items:center;
            gap:8px;
            flex:0 0 auto;
          }
          .pbtn{
            width:34px;
            height:34px;
            border-radius: 12px;
            border: 1px solid rgba(255,255,255,.14);
            background: rgba(255,255,255,.06);
            color: rgba(255,255,255,.92);
            display:inline-flex;
            align-items:center;
            justify-content:center;
            cursor:pointer;
            transition: transform .16s ease, background .16s ease, border-color .16s ease, filter .16s ease;
            user-select:none;
          }
          .pbtn:hover{
            transform: scale(1.08);
            background: rgba(255,255,255,.10);
            border-color: rgba(255,255,255,.20);
          }
          .pbtn:active{ transform: scale(1.03); }
          .pbtn[disabled]{ opacity:.45; cursor:default; transform:none; }

          .pico{
            width:16px; height:16px; display:block;
            fill: currentColor;
          }

          

          /* Playerbar volume (solo escritorio; el playerbar sigue funcionando en móviles) */
          .pb-vol{ display:none; align-items:center; gap:10px; margin-left:14px; padding-left:14px;
            border-left:1px solid rgba(255,255,255,.10); }
          .pb-vol__icon{ opacity:.85; font-size:14px; }
          .pb-vol__val{ font-size:12px; color:rgba(255,255,255,.75); min-width:46px; text-align:right; }
          .pb-vol__range{ width:140px; accent-color: rgba(255,255,255,.65); }

          /* Solo pantallas grandes y solo cuando el playerbar está visible (play) */
          @media (min-width: 1048px){
            #playerbar.is-visible .pb-vol{ display:flex; }
          }
/* Cover overlay: stop icon when playing */
          .sxm-stop-ico{
            position:absolute;
            left:50%; top:50%;
            transform: translate(-50%,-50%) scale(.96);
            width:54px; height:54px;
            border-radius:999px;
            background: rgba(255,255,255,.14);
            border: 1px solid rgba(255,255,255,.22);
            box-shadow: 0 10px 26px rgba(0,0,0,.35);
            opacity:0;
            transition: opacity .18s ease, transform .18s ease, background .18s ease, border-color .18s ease;
            z-index:3;
            pointer-events:none;
          }
          .sxm-stop-ico::after{
            content:"";
            width:16px;
            height:16px;
            border-radius:4px;
            background: rgba(255,255,255,.92);
            position:absolute;
            left:50%; top:50%;
            transform: translate(-50%,-50%);
          }

          /* When playing: show stop icon (and hide play triangle), even without hover */
          .sxm-strip__img.is-playing::before{ opacity:1; }
          .sxm-strip__img.is-playing::after{ opacity:0; } /* hide the generic circle */
          .sxm-strip__img.is-playing .sxm-play-tri{ opacity:0 !important; }
          .sxm-strip__img.is-playing .sxm-stop-ico{
            opacity:1;
            transform: translate(-50%,-50%) scale(1);
            background: rgba(255,255,255,.18);
            border-color: rgba(255,255,255,.28);
          }

          /* Keep original hover play behavior when NOT playing */
          .sxm-strip__img.is-playing:hover::after{ opacity:0; }
          .footer{
            margin-top: 18px;
            font-size: 12px;
            color: rgba(255,255,255,.65);
            display:flex;
            gap:10px;
            align-items:center;
            justify-content:center;
          }
          .footer a{ color: rgba(255,255,255,.78); text-decoration:none; }
          .footer a:hover{ text-decoration:underline; }

          @media (max-width: 720px){
            .sxm-strip{
              grid-template-columns: 88px 1fr;
              grid-template-rows: auto auto;
            }
            .sxm-strip__img{ width:88px; height:88px; }
            .sxm-right{
              grid-column: 1 / -1;
              border-top: 1px solid var(--border);
              padding-top: 10px;
              justify-content: space-between;
              gap: 12px;
            }
            .sxm-divider{ display:none; }
            .sxm-mini{ width:72px; height:72px; }
          }

          /* ===== Mobile visual viewport fix (lindo40) ===== */
          html, body{ min-height: 100%; }
          body{ min-height: 100dvh; }
          @supports not (height: 100dvh){
            body{ min-height: 100vh; }
          }
          /* Keep bars inside the *visible* area on mobile */
          .topbar{ top: env(safe-area-inset-top); }
          .playerbar{ bottom: calc(14px + env(safe-area-inset-bottom)); }