/* ===== public_v06.css ===== */
*{box-sizing:border-box}html{scroll-behavior:smooth}:root{--bg:#06111d;--panel:#0b1b2b;--panel2:#0f2336;--line:#19354c;--text:#f7f9fc;--muted:#93a8ba;--cyan:#13c6c8;--blue:#1684f8;--green:#29d17c;--danger:#ef5665}body{margin:0;background:radial-gradient(circle at 50% 18%,#0b2740 0,#06111d 38%,#040b12 100%);color:var(--text);font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;min-height:100vh}.shell{width:min(1500px,calc(100% - 56px));margin:auto}.country-strip{background:#031f2b;border-bottom:1px solid #0d4050}.country-inner{height:50px;display:flex;align-items:center;gap:8px;overflow:auto;scrollbar-width:none}.country-inner::-webkit-scrollbar{display:none}.country-chip{display:flex;align-items:center;gap:5px;background:transparent;border:0;color:#d7e8ef;text-decoration:none;padding:6px 8px;border-radius:9px;white-space:nowrap;cursor:pointer}.country-chip span{font-size:20px}.country-chip small{font-size:10px}.country-chip.active,.country-chip:hover{background:#123b4b}.country-chip.more{margin-left:auto;font-weight:800}.topbar{position:sticky;top:0;z-index:50;background:#06111df2;backdrop-filter:blur(16px);border-bottom:1px solid #13283a}.topbar-inner{height:92px;display:flex;align-items:center;gap:28px}.brand{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none;min-width:250px}.brand .wave{font-size:38px;transform:rotate(90deg);color:var(--cyan)}.brand strong{font-size:34px;letter-spacing:-1.5px}.brand strong span{color:var(--cyan)}.search{height:52px;max-width:520px;flex:1;display:flex;align-items:center;gap:10px;background:#0b1c2c;border:1px solid #1b3347;border-radius:15px;padding:0 16px}.search input{width:100%;border:0;outline:0;background:transparent;color:#fff;font-size:15px}.search input::placeholder{color:#71879a}.admin-link{margin-left:auto;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:#0f2233;color:#cfe5f4;text-decoration:none;border:1px solid #1a364e}.page{padding:18px 0 80px}.quick-filters{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:20px}.pill{border:1px solid #1b3850;background:#0b1a2a;color:#dbe9f3;text-decoration:none;border-radius:999px;padding:10px 17px;font-weight:700;cursor:pointer}.pill:hover,.pill.active{border-color:#16cfd0;background:linear-gradient(180deg,#14bfc3,#0e98aa);color:white}.layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px}.maincol{min-width:0}.media-tabs{height:56px;border:1px solid var(--line);border-bottom:0;border-radius:18px 18px 0 0;background:#081a29;display:flex}.media-tab{display:flex;align-items:center;gap:8px;padding:0 28px;color:#9fb5c7;text-decoration:none;border-bottom:2px solid transparent;font-weight:800}.media-tab.active{color:#fff;border-bottom-color:var(--cyan);background:#0b2b3b}.hero-player{position:relative;overflow:hidden;min-height:292px;background:linear-gradient(135deg,#06263a,#0a1525 55%,#061d2c);border:1px solid var(--line);border-radius:0 0 18px 18px;display:grid;grid-template-columns:210px minmax(0,1fr);gap:34px;align-items:center;padding:36px 44px;margin-bottom:18px;box-shadow:0 22px 60px #0005}.hero-logo-wrap{position:relative;width:190px;height:190px;z-index:2}.hero-logo,.hero-video{width:100%;height:100%;border-radius:15px;background:#fff;object-fit:contain;box-shadow:0 18px 44px #0006}.hero-video{display:none;background:#000;object-fit:contain}.hero-info{z-index:2;max-width:650px}.live-badge{display:inline-block;background:#0a7f8d8c;color:#65f1ec;padding:6px 11px;border-radius:7px;font-size:12px;font-weight:900}.hero-info h1{font-size:34px;line-height:1.08;margin:12px 0 8px}.hero-info p{color:#c0d0dc;font-size:16px;margin:0}.controls{display:flex;align-items:center;gap:15px;margin:25px 0 18px}.round{border:0;border-radius:50%;background:#132c40;color:white;display:grid;place-items:center;cursor:pointer}.round.small{width:45px;height:45px}.round.playbig{width:64px;height:64px;background:linear-gradient(180deg,#19d4cf,#12aeb9);font-size:24px;box-shadow:0 10px 30px #0fc7cc55}.round.heart{margin-left:auto}.round.favorite{color:#ff6877}.volume-row{display:grid;grid-template-columns:auto minmax(140px,400px) auto;gap:12px;align-items:center;color:#9db1c0}.volume-row input{accent-color:#19c9c9}.eq{position:absolute;width:145px;height:120px;opacity:.22;background:repeating-linear-gradient(90deg,transparent 0 5px,#13c8cb 5px 10px,transparent 10px 14px);mask-image:linear-gradient(to top,black,transparent 85%);bottom:58px}.left-eq{left:22px}.right-eq{right:22px}.section-head{display:flex;align-items:center;justify-content:space-between;margin:17px 0 12px}.section-head h2{font-size:18px;margin:0}.section-head span{color:#70a9bb;font-size:13px}.station-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}.station-card{border:1px solid #18354b;background:linear-gradient(180deg,#0c2031,#091827);border-radius:13px;color:white;padding:10px;min-width:0;text-align:center;cursor:pointer;display:none;transition:.18s}.station-card.visible{display:block}.station-card:hover,.station-card.selected{transform:translateY(-2px);border-color:#19aebd;background:#0d293c}.station-logo{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:1.55/1;background:#fff;border-radius:8px;overflow:hidden;margin-bottom:8px}.station-logo img{width:100%;height:100%;object-fit:contain;padding:4px}.station-card strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px}.station-card small{display:block;color:#849bad;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:3px;font-size:11px}.load-more{width:34%;min-width:240px;margin:14px auto 0;display:block;border:0;border-radius:999px;padding:10px;background:#0f293d;color:white;cursor:pointer}.sidecol{display:flex;flex-direction:column;gap:18px}.side-card{background:linear-gradient(180deg,#0b1f31,#081827);border:1px solid #19364c;border-radius:18px;padding:18px}.side-title{display:flex;align-items:center;gap:10px;border-bottom:1px solid #173247;padding-bottom:12px;margin-bottom:5px}.side-title h3{font-size:16px;margin:0}.region-link{display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:10px;color:#d9e8f1;text-decoration:none;padding:10px 0;border-bottom:1px solid #132c40}.region-dot{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#17334a}.region-link strong,.region-link small{display:block}.region-link small{color:#758fa3;font-size:11px;margin-top:2px}.more-link{display:inline-block;color:#25ced1;text-decoration:none;margin-top:13px;font-size:13px}.genre-cloud{display:flex;flex-wrap:wrap;gap:9px;padding-top:8px}.genre-cloud a{background:#122b40;color:#d8e7ef;text-decoration:none;border-radius:999px;padding:9px 13px;font-size:12px}.genre-cloud a:hover{background:#16435b}.favorites-list{display:grid;gap:7px}.favorite-row{display:flex;align-items:center;gap:8px;background:#0c2638;border-radius:9px;padding:7px;cursor:pointer}.favorite-row img{width:34px;height:34px;object-fit:contain;background:#fff;border-radius:6px}.empty-state{padding:40px;text-align:center;background:#0a1b29;border:1px solid #18354b;border-radius:0 0 18px 18px;color:#8da5b7}.countries-modal{position:fixed;inset:0;z-index:100;background:#000b;display:grid;place-items:center;padding:20px}.countries-modal[hidden]{display:none}.modal-panel{position:relative;width:min(850px,100%);max-height:80vh;overflow:auto;background:#0a1927;border:1px solid #20435c;border-radius:18px;padding:24px}.modal-close{position:absolute;right:15px;top:12px;border:0;background:transparent;color:white;font-size:30px}.country-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.country-grid a{display:grid;grid-template-columns:35px 1fr auto;gap:8px;align-items:center;color:white;text-decoration:none;background:#10283a;padding:10px;border-radius:10px}.country-grid a span{font-size:24px}.country-grid small{color:#83a0b5}.muted{color:var(--muted)}@media(max-width:1250px){.station-grid{grid-template-columns:repeat(5,1fr)}.layout{grid-template-columns:minmax(0,1fr) 285px}}@media(max-width:1000px){.shell{width:min(100% - 28px,1100px)}.layout{grid-template-columns:1fr}.sidecol{display:grid;grid-template-columns:1fr 1fr}.favorites-box{display:none}.station-grid{grid-template-columns:repeat(4,1fr)}.topbar-inner{height:auto;padding:15px 0;flex-wrap:wrap}.brand{min-width:unset}.search{order:3;flex-basis:100%;max-width:none}.admin-link{margin-left:auto}}@media(max-width:700px){.country-strip{position:sticky;top:0;z-index:60}.brand strong{font-size:27px}.brand .wave{font-size:30px}.quick-filters{justify-content:flex-start;overflow:auto;flex-wrap:nowrap}.pill{white-space:nowrap}.hero-player{grid-template-columns:105px 1fr;gap:18px;padding:24px 18px;min-height:220px}.hero-logo-wrap{width:105px;height:105px}.hero-info h1{font-size:24px}.eq{display:none}.round.heart{margin-left:0}.volume-row{grid-template-columns:auto 1fr}.volume-row span:last-child{grid-column:1/-1}.station-grid{grid-template-columns:repeat(3,1fr)}.sidecol{grid-template-columns:1fr}.country-grid{grid-template-columns:1fr 1fr}.media-tab{padding:0 18px}.shell{width:calc(100% - 20px)}}@media(max-width:430px){.station-grid{grid-template-columns:repeat(2,1fr)}.hero-player{grid-template-columns:1fr;text-align:center}.hero-logo-wrap{margin:auto;width:135px;height:135px}.controls{justify-content:center}.volume-row{grid-template-columns:auto 1fr}.country-grid{grid-template-columns:1fr}.load-more{width:100%}}

/* ===== public_v063.css ===== */

/* Sintonía+ 0.6.3 — reproductor más compacto */
.hero-player{
  min-height:205px!important;
  grid-template-columns:138px minmax(0,1fr)!important;
  gap:24px!important;
  padding:20px 28px!important;
  margin-bottom:14px!important;
}

.hero-logo-wrap{
  width:126px!important;
  height:126px!important;
}

.hero-logo,
.hero-video{
  border-radius:12px!important;
}

.hero-info{
  max-width:720px!important;
}

.live-badge{
  padding:4px 8px!important;
  font-size:10px!important;
}

.hero-info h1{
  font-size:27px!important;
  margin:7px 0 4px!important;
}

.hero-info p{
  font-size:14px!important;
}

.controls{
  gap:11px!important;
  margin:13px 0 10px!important;
}

.round.small{
  width:38px!important;
  height:38px!important;
  font-size:13px!important;
}

.round.playbig{
  width:52px!important;
  height:52px!important;
  font-size:20px!important;
}

.volume-row{
  grid-template-columns:auto minmax(120px,330px) auto!important;
  gap:9px!important;
  font-size:12px!important;
}

.eq{
  width:105px!important;
  height:76px!important;
  bottom:35px!important;
}

.media-tabs{
  height:48px!important;
}

.media-tab{
  padding:0 22px!important;
}

@media(max-width:700px){
  .hero-player{
    min-height:155px!important;
    grid-template-columns:88px minmax(0,1fr)!important;
    gap:14px!important;
    padding:15px 14px!important;
  }

  .hero-logo-wrap{
    width:84px!important;
    height:84px!important;
  }

  .hero-info h1{
    font-size:21px!important;
  }

  .hero-info p{
    font-size:12px!important;
  }

  .controls{
    margin:9px 0 7px!important;
  }

  .round.small{
    width:34px!important;
    height:34px!important;
  }

  .round.playbig{
    width:44px!important;
    height:44px!important;
  }
}

@media(max-width:430px){
  .hero-player{
    grid-template-columns:74px minmax(0,1fr)!important;
    text-align:left!important;
    padding:13px 12px!important;
  }

  .hero-logo-wrap{
    width:70px!important;
    height:70px!important;
    margin:0!important;
  }

  .hero-info h1{
    font-size:18px!important;
  }

  .controls{
    justify-content:flex-start!important;
  }

  .volume-row{
    grid-template-columns:auto 1fr!important;
  }
}

/* ===== public_v064.css ===== */

/* Sintonía+ 0.6.4 — reproductor a media anchura + accesos rápidos */

.player-stage{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(330px,.92fr);
  gap:14px;
  align-items:stretch;
  margin-bottom:18px;
}

/* El reproductor queda cerca de la mitad del espacio útil. */
.player-stage .hero-player{
  min-height:168px!important;
  grid-template-columns:92px minmax(0,1fr)!important;
  gap:16px!important;
  padding:16px 18px!important;
  margin:0!important;
  border-radius:0 0 16px 16px!important;
}

.player-stage .hero-logo-wrap{
  width:86px!important;
  height:86px!important;
}

.player-stage .hero-info{
  max-width:none!important;
}

.player-stage .live-badge{
  font-size:9px!important;
  padding:3px 7px!important;
}

.player-stage .hero-info h1{
  font-size:22px!important;
  margin:6px 0 3px!important;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.player-stage .hero-info p{
  font-size:12px!important;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.player-stage .controls{
  margin:9px 0 7px!important;
  gap:8px!important;
}

.player-stage .round.small{
  width:34px!important;
  height:34px!important;
  font-size:11px!important;
}

.player-stage .round.playbig{
  width:44px!important;
  height:44px!important;
  font-size:17px!important;
}

.player-stage .volume-row{
  grid-template-columns:auto minmax(90px,1fr) auto!important;
  font-size:11px!important;
  gap:7px!important;
}

.player-stage .eq{
  width:65px!important;
  height:52px!important;
  bottom:22px!important;
}

.quick-stations-panel{
  background:linear-gradient(180deg,#0b1f31,#081827);
  border:1px solid #19364c;
  border-radius:16px;
  padding:12px;
  min-width:0;
}

.quick-stations-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:9px;
}

.quick-stations-head strong{
  display:block;
  font-size:14px;
}

.quick-stations-head small{
  display:block;
  color:#7f9aab;
  font-size:10px;
  margin-top:2px;
}

.quick-stations-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
}

.quick-station{
  min-width:0;
  border:1px solid #18364c;
  background:#0c2030;
  color:#fff;
  border-radius:10px;
  padding:6px;
  cursor:pointer;
  text-align:center;
  transition:.15s;
}

.quick-station:hover{
  border-color:#1bc8cb;
  transform:translateY(-1px);
  background:#0d2a3d;
}

.quick-station.active{
  border-color:#20d7dd;
  background:#0d3144;
  box-shadow:0 0 0 2px rgba(32,215,221,.16);
}

.quick-station span{
  width:100%;
  aspect-ratio:1/1;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  border-radius:7px;
  overflow:hidden;
}

.quick-station img{
  width:100%;
  height:100%;
  object-fit:contain;
  padding:3px;
}

.quick-station b{
  display:block;
  margin-top:5px;
  font-size:10px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.quick-empty{
  grid-column:1/-1;
  color:#8199aa;
  font-size:12px;
  padding:25px;
  text-align:center;
}

/* En móvil el reproductor vuelve a ocupar arriba y los iconos quedan abajo. */
@media(max-width:900px){
  .player-stage{
    grid-template-columns:1fr;
  }

  .quick-stations-grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }

  .player-stage .hero-player{
    border-radius:0 0 16px 16px!important;
  }
}

@media(max-width:520px){
  .quick-stations-grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:6px;
  }

  .quick-station{
    padding:4px;
  }

  .quick-station b{
    font-size:9px;
  }

  .player-stage .hero-player{
    grid-template-columns:68px minmax(0,1fr)!important;
    min-height:136px!important;
    padding:12px!important;
  }

  .player-stage .hero-logo-wrap{
    width:64px!important;
    height:64px!important;
  }

  .player-stage .hero-info h1{
    font-size:18px!important;
  }

  .player-stage .round.small{
    width:30px!important;
    height:30px!important;
  }

  .player-stage .round.playbig{
    width:38px!important;
    height:38px!important;
  }
}

/* ===== public_v065.css ===== */

/* Sintonía+ 0.6.5 — TV compacta con ampliación */

.tv-player-compact{
  grid-template-columns:238px minmax(0,1fr)!important;
  min-height:165px!important;
}

.tv-player-compact .hero-logo-wrap{
  width:226px!important;
  height:127px!important;
  aspect-ratio:16/9!important;
  background:#02070b!important;
  border-radius:10px!important;
  overflow:hidden!important;
}

.tv-player-compact .hero-video{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  background:#000!important;
  border-radius:10px!important;
}

.tv-player-compact .hero-logo{
  display:none!important;
}

.expand-tv{
  font-size:17px!important;
}

.tv-player-compact .eq{
  display:none!important;
}

@media(max-width:700px){
  .tv-player-compact{
    grid-template-columns:160px minmax(0,1fr)!important;
  }

  .tv-player-compact .hero-logo-wrap{
    width:154px!important;
    height:87px!important;
  }
}

@media(max-width:480px){
  .tv-player-compact{
    grid-template-columns:1fr!important;
  }

  .tv-player-compact .hero-logo-wrap{
    width:100%!important;
    height:auto!important;
    aspect-ratio:16/9!important;
  }
}

/* ===== public_v066.css ===== */

/* Sintonía+ 0.6.6 — TV player limpio, sin controles superpuestos */

.player-stage .tv-player-compact{
  display:grid!important;
  grid-template-columns:320px minmax(0,1fr)!important;
  align-items:center!important;
  gap:18px!important;
  min-height:205px!important;
  padding:15px!important;
  overflow:hidden!important;
}

.player-stage .tv-player-compact .hero-logo-wrap{
  width:320px!important;
  height:auto!important;
  aspect-ratio:16/9!important;
  justify-self:start!important;
  align-self:center!important;
  background:#02070b!important;
  border:1px solid #234459!important;
  border-radius:12px!important;
  box-shadow:0 10px 24px rgba(0,0,0,.28)!important;
  overflow:hidden!important;
}

.player-stage .tv-player-compact .hero-video{
  display:block!important;
  width:100%!important;
  height:100%!important;
  aspect-ratio:16/9!important;
  object-fit:contain!important;
  background:#000!important;
  border-radius:11px!important;
  outline:none!important;
}

/* Sin controles HTML nativos: usamos solamente los de Sintonía+ */
.player-stage .tv-player-compact video::-webkit-media-controls{
  display:none!important;
}

.player-stage .tv-player-compact .hero-info{
  min-width:0!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  align-items:flex-start!important;
  padding:2px 2px 2px 0!important;
}

.player-stage .tv-player-compact .live-badge{
  margin:0 0 6px!important;
}

.player-stage .tv-player-compact .hero-info h1{
  max-width:100%!important;
  margin:0 0 4px!important;
  font-size:21px!important;
  line-height:1.12!important;
  white-space:normal!important;
  display:-webkit-box!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:2!important;
  overflow:hidden!important;
}

.player-stage .tv-player-compact .hero-info p{
  margin:0 0 11px!important;
  font-size:11px!important;
  color:#89a5b7!important;
  white-space:normal!important;
  line-height:1.35!important;
}

.player-stage .tv-player-compact .controls{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  flex-wrap:wrap!important;
  gap:7px!important;
  margin:0 0 12px!important;
}

.player-stage .tv-player-compact .round.small{
  width:34px!important;
  height:34px!important;
  flex:0 0 34px!important;
}

.player-stage .tv-player-compact .round.playbig{
  width:46px!important;
  height:46px!important;
  flex:0 0 46px!important;
}

.player-stage .tv-player-compact .volume-row{
  width:100%!important;
  display:grid!important;
  grid-template-columns:18px minmax(90px,1fr)!important;
  gap:7px!important;
  align-items:center!important;
  margin:0!important;
}

.player-stage .tv-player-compact .volume-row input{
  width:100%!important;
  min-width:0!important;
}

.player-stage .tv-player-compact .volume-row #playStatus{
  grid-column:1/-1!important;
  margin-top:4px!important;
  font-size:11px!important;
  color:#92aabd!important;
  min-height:15px!important;
}

.player-stage .tv-player-compact .eq{
  display:none!important;
}

.player-stage .tv-player-compact .expand-tv{
  display:inline-flex!important;
}

@media(max-width:1120px){
  .player-stage .tv-player-compact{
    grid-template-columns:270px minmax(0,1fr)!important;
  }
  .player-stage .tv-player-compact .hero-logo-wrap{
    width:270px!important;
  }
}

@media(max-width:900px){
  .player-stage .tv-player-compact{
    grid-template-columns:300px minmax(0,1fr)!important;
  }
  .player-stage .tv-player-compact .hero-logo-wrap{
    width:300px!important;
  }
}

@media(max-width:650px){
  .player-stage .tv-player-compact{
    grid-template-columns:1fr!important;
    gap:12px!important;
  }

  .player-stage .tv-player-compact .hero-logo-wrap{
    width:min(100%,360px)!important;
    justify-self:center!important;
  }

  .player-stage .tv-player-compact .hero-info{
    width:100%!important;
    align-items:center!important;
    text-align:center!important;
  }

  .player-stage .tv-player-compact .controls{
    justify-content:center!important;
  }

  .player-stage .tv-player-compact .volume-row{
    max-width:360px!important;
  }
}

/* ===== public_v067.css ===== */

/* Sintonía+ 0.6.7
   TV mejor proporcionada + modo cine + populares manuales
*/

.player-stage{
  align-items:start!important;
}

/* Player de TV: elimina el hueco vertical y lo convierte en una tarjeta compacta. */
.player-stage .tv-player-compact{
  display:grid!important;
  grid-template-columns:minmax(300px,360px) minmax(210px,1fr)!important;
  gap:18px!important;
  align-items:center!important;
  align-self:start!important;
  min-height:0!important;
  height:auto!important;
  padding:14px!important;
  border-radius:0 0 15px 15px!important;
  background:
    radial-gradient(circle at 20% 50%,#10344b55,transparent 45%),
    linear-gradient(135deg,#082236,#071623)!important;
}

.player-stage .tv-player-compact .hero-logo-wrap{
  width:100%!important;
  max-width:360px!important;
  height:auto!important;
  aspect-ratio:16/9!important;
  align-self:center!important;
  justify-self:start!important;
  border:1px solid #28526a!important;
  border-radius:12px!important;
  overflow:hidden!important;
  background:#000!important;
  box-shadow:0 12px 30px #0007!important;
}

.player-stage .tv-player-compact .hero-video{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  background:#000!important;
  border-radius:11px!important;
}

.player-stage .tv-player-compact .hero-info{
  width:100%!important;
  min-width:0!important;
  padding:0!important;
  justify-content:center!important;
}

.player-stage .tv-player-compact .hero-info h1{
  font-size:23px!important;
  line-height:1.15!important;
  margin:7px 0 4px!important;
}

.player-stage .tv-player-compact .hero-info p{
  margin:0 0 10px!important;
  font-size:12px!important;
}

.player-stage .tv-player-compact .controls{
  display:flex!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  gap:8px!important;
  margin:9px 0 10px!important;
}

.tv-expand-button{
  height:36px;
  border:1px solid #244a62;
  border-radius:10px;
  padding:0 12px;
  background:#102d42;
  color:#dff7ff;
  font-weight:800;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
}

.tv-expand-button:hover{
  background:#17415b;
  border-color:#20cdd0;
}

.player-stage .tv-player-compact .volume-row{
  width:min(100%,380px)!important;
  grid-template-columns:18px minmax(100px,1fr)!important;
  gap:8px!important;
  margin:0!important;
}

.player-stage .tv-player-compact .volume-row #playStatus{
  grid-column:1/-1!important;
  font-size:11px!important;
  margin-top:2px!important;
}

/* Panel derecho de rápidos ajustado a la altura del reproductor. */
.quick-stations-panel{
  align-self:start!important;
  min-height:0!important;
}

.quick-stations-grid{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
}

.quick-station span{
  aspect-ratio:1.15/1!important;
}

/* Populares seleccionados. */
.station-logo{
  position:relative!important;
}

.popular-badge{
  position:absolute;
  top:5px;
  right:5px;
  z-index:4;
  width:24px;
  height:24px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#f7b928;
  color:#382400;
  font-style:normal;
  font-size:13px;
  border:2px solid #fff;
  box-shadow:0 3px 9px #0006;
}

.featured-card{
  border-color:#8d6a1b!important;
}

/* MODO CINE: fallback si Fullscreen API falla. */
body.tv-theater-open{
  overflow:hidden!important;
}

.hero-player.tv-theater{
  position:fixed!important;
  inset:18px!important;
  z-index:9999!important;
  width:auto!important;
  height:auto!important;
  max-width:none!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 310px!important;
  background:#02070c!important;
  border:1px solid #2e5b72!important;
  border-radius:16px!important;
  padding:18px!important;
  box-shadow:0 0 0 9999px #000e!important;
}

.hero-player.tv-theater .hero-logo-wrap{
  max-width:none!important;
  width:100%!important;
  height:100%!important;
  aspect-ratio:auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}

.hero-player.tv-theater .hero-video{
  width:100%!important;
  height:100%!important;
  max-height:calc(100vh - 72px)!important;
  object-fit:contain!important;
}

.hero-player.tv-theater .hero-info{
  padding:20px!important;
}

.hero-player.tv-theater .tv-expand-button{
  background:#7d2632!important;
  border-color:#b54552!important;
}

@media(max-width:1150px){
  .player-stage .tv-player-compact{
    grid-template-columns:minmax(270px,330px) minmax(190px,1fr)!important;
  }
}

@media(max-width:900px){
  .player-stage .tv-player-compact{
    grid-template-columns:minmax(280px,360px) minmax(220px,1fr)!important;
  }

  .hero-player.tv-theater{
    grid-template-columns:1fr!important;
  }
}

@media(max-width:650px){
  .player-stage .tv-player-compact{
    grid-template-columns:1fr!important;
    gap:11px!important;
  }

  .player-stage .tv-player-compact .hero-logo-wrap{
    max-width:100%!important;
  }

  .player-stage .tv-player-compact .hero-info{
    align-items:flex-start!important;
    text-align:left!important;
  }

  .player-stage .tv-player-compact .controls{
    justify-content:flex-start!important;
  }

  .hero-player.tv-theater{
    inset:5px!important;
    padding:8px!important;
  }
}

/* ===== public_v068.css ===== */

/* Sintonía+ 0.6.8 — categorías TV */
.tv-category-bar{
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding:2px 0 12px;
  margin-top:-2px;
  scrollbar-width:thin;
}

.tv-category-bar a{
  flex:0 0 auto;
  border:1px solid #1e3c51;
  background:#0b1c2b;
  color:#c5d9e7;
  border-radius:999px;
  padding:8px 12px;
  font-size:12px;
  font-weight:800;
  text-decoration:none;
  transition:.15s;
}

.tv-category-bar a:hover{
  border-color:#22c8cc;
  color:#fff;
}

.tv-category-bar a.active{
  background:linear-gradient(135deg,#1185ef,#18bdc3);
  border-color:#24d0d0;
  color:#fff;
  box-shadow:0 5px 18px #0a9fb044;
}

/* ===== public_v069.css ===== */

.report-stream-btn{
  height:36px;
  border:1px solid #70404a;
  border-radius:10px;
  padding:0 11px;
  background:#2e1b22;
  color:#ffc4cc;
  font-weight:800;
  cursor:pointer;
}
.report-stream-btn:hover,.report-stream-btn.alert{
  background:#5a2430;
  border-color:#b94959;
  color:#fff;
}
.report-modal{
  position:fixed;
  inset:0;
  z-index:12000;
  background:#000b;
  display:grid;
  place-items:center;
  padding:18px;
}
.report-modal[hidden]{display:none!important}
.report-panel{
  position:relative;
  width:min(520px,100%);
  background:#101c27;
  border:1px solid #2e4659;
  border-radius:16px;
  padding:20px;
  box-shadow:0 24px 80px #000a;
}
.report-panel h2{margin:0 0 5px}
.report-close{
  position:absolute;
  top:9px;
  right:10px;
  width:34px;
  height:34px;
  border:0;
  border-radius:50%;
  background:#1d2b38;
  color:#fff;
  font-size:22px;
  cursor:pointer;
}
.report-options{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
  margin:15px 0;
}
.report-options label{
  background:#0b1620;
  border:1px solid #263b4c;
  border-radius:9px;
  padding:9px;
  font-size:13px;
  cursor:pointer;
}
.report-options input{width:auto}
#reportNote{
  width:100%;
  min-height:82px;
  resize:vertical;
  background:#08131c;
  border:1px solid #2a4052;
  border-radius:10px;
  color:#fff;
  padding:10px;
}
.report-actions{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:11px;
}
.report-send{
  border:0;
  border-radius:9px;
  background:#e04455;
  color:#fff;
  padding:10px 14px;
  font-weight:800;
  cursor:pointer;
}
#reportMsg{
  font-size:12px;
  color:#88d9a8;
}
@media(max-width:520px){
  .report-options{grid-template-columns:1fr}
  .report-stream-btn{padding:0 8px;font-size:11px}
}

/* ===== public_v070.css ===== */

/* Sintonía+ 0.6.10
   Corrige TV ampliada: el vídeo ahora llena realmente la pantalla.
*/

/* -------------------------------------------------------
   PANTALLA COMPLETA REAL + MODO CINE
------------------------------------------------------- */

#heroPlayer:fullscreen,
#heroPlayer:-webkit-full-screen,
#heroPlayer.tv-fullscreen-style,
#heroPlayer.tv-theater{
  box-sizing:border-box!important;
  width:100vw!important;
  height:100vh!important;
  max-width:none!important;
  max-height:none!important;
  min-width:0!important;
  min-height:0!important;
  margin:0!important;
  padding:16px 20px!important;

  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  grid-template-rows:minmax(0,1fr) auto!important;
  gap:10px!important;

  background:#02080d!important;
  border:0!important;
  border-radius:0!important;
  overflow:hidden!important;
}

/* Modo cine cuando el navegador no concede Fullscreen API. */
#heroPlayer.tv-theater{
  position:fixed!important;
  inset:0!important;
  z-index:20000!important;
  box-shadow:0 0 0 9999px #000!important;
}

/* El reproductor de vídeo ocupa todo el espacio disponible. */
#heroPlayer:fullscreen .hero-logo-wrap,
#heroPlayer:-webkit-full-screen .hero-logo-wrap,
#heroPlayer.tv-fullscreen-style .hero-logo-wrap,
#heroPlayer.tv-theater .hero-logo-wrap{
  grid-row:1!important;
  grid-column:1!important;

  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  min-width:0!important;
  min-height:0!important;

  aspect-ratio:auto!important;
  justify-self:stretch!important;
  align-self:stretch!important;

  display:flex!important;
  align-items:center!important;
  justify-content:center!important;

  padding:0!important;
  margin:0!important;

  background:#000!important;
  border:1px solid #17364a!important;
  border-radius:12px!important;
  overflow:hidden!important;
  box-shadow:none!important;
}

#heroPlayer:fullscreen .hero-video,
#heroPlayer:-webkit-full-screen .hero-video,
#heroPlayer.tv-fullscreen-style .hero-video,
#heroPlayer.tv-theater .hero-video{
  display:block!important;

  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;

  object-fit:contain!important;
  object-position:center center!important;

  margin:0!important;
  padding:0!important;
  border-radius:10px!important;
  background:#000!important;
}

/* En pantalla completa no necesitamos las barras decorativas. */
#heroPlayer:fullscreen .eq,
#heroPlayer:-webkit-full-screen .eq,
#heroPlayer.tv-fullscreen-style .eq,
#heroPlayer.tv-theater .eq{
  display:none!important;
}

/* Barra inferior compacta. */
#heroPlayer:fullscreen .hero-info,
#heroPlayer:-webkit-full-screen .hero-info,
#heroPlayer.tv-fullscreen-style .hero-info,
#heroPlayer.tv-theater .hero-info{
  grid-row:2!important;
  grid-column:1!important;

  width:100%!important;
  max-width:none!important;
  min-width:0!important;

  display:grid!important;
  grid-template-columns:minmax(210px,1fr) auto!important;
  grid-template-areas:
    "name controls"
    "meta volume"!important;
  align-items:center!important;
  gap:4px 18px!important;

  box-sizing:border-box!important;
  margin:0!important;
  padding:10px 14px!important;

  background:#081724ee!important;
  border:1px solid #17364a!important;
  border-radius:12px!important;
}

#heroPlayer:fullscreen .live-badge,
#heroPlayer:-webkit-full-screen .live-badge,
#heroPlayer.tv-fullscreen-style .live-badge,
#heroPlayer.tv-theater .live-badge{
  display:none!important;
}

#heroPlayer:fullscreen .hero-info h1,
#heroPlayer:-webkit-full-screen .hero-info h1,
#heroPlayer.tv-fullscreen-style .hero-info h1,
#heroPlayer.tv-theater .hero-info h1{
  grid-area:name!important;
  margin:0!important;
  font-size:20px!important;
  line-height:1.15!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

#heroPlayer:fullscreen .hero-info p,
#heroPlayer:-webkit-full-screen .hero-info p,
#heroPlayer.tv-fullscreen-style .hero-info p,
#heroPlayer.tv-theater .hero-info p{
  grid-area:meta!important;
  margin:0!important;
  font-size:11px!important;
  color:#8ea8b9!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

#heroPlayer:fullscreen .controls,
#heroPlayer:-webkit-full-screen .controls,
#heroPlayer.tv-fullscreen-style .controls,
#heroPlayer.tv-theater .controls{
  grid-area:controls!important;
  display:flex!important;
  flex-wrap:nowrap!important;
  justify-content:flex-end!important;
  align-items:center!important;
  gap:7px!important;
  margin:0!important;
}

#heroPlayer:fullscreen .volume-row,
#heroPlayer:-webkit-full-screen .volume-row,
#heroPlayer.tv-fullscreen-style .volume-row,
#heroPlayer.tv-theater .volume-row{
  grid-area:volume!important;

  width:260px!important;
  max-width:30vw!important;

  display:grid!important;
  grid-template-columns:18px minmax(100px,1fr) auto!important;
  gap:7px!important;
  align-items:center!important;

  margin:0!important;
  font-size:10px!important;
}

#heroPlayer:fullscreen .round.small,
#heroPlayer:-webkit-full-screen .round.small,
#heroPlayer.tv-fullscreen-style .round.small,
#heroPlayer.tv-theater .round.small{
  width:34px!important;
  height:34px!important;
}

#heroPlayer:fullscreen .round.playbig,
#heroPlayer:-webkit-full-screen .round.playbig,
#heroPlayer.tv-fullscreen-style .round.playbig,
#heroPlayer.tv-theater .round.playbig{
  width:42px!important;
  height:42px!important;
}

#heroPlayer:fullscreen .tv-expand-button,
#heroPlayer:-webkit-full-screen .tv-expand-button,
#heroPlayer.tv-fullscreen-style .tv-expand-button,
#heroPlayer.tv-theater .tv-expand-button{
  height:34px!important;
  background:#7f2633!important;
  border-color:#b34251!important;
  color:#fff!important;
}

/* En modo ampliado el reportar sigue disponible pero discreto. */
#heroPlayer:fullscreen .report-stream-btn,
#heroPlayer:-webkit-full-screen .report-stream-btn,
#heroPlayer.tv-fullscreen-style .report-stream-btn,
#heroPlayer.tv-theater .report-stream-btn{
  height:34px!important;
  padding:0 9px!important;
}

/* -------------------------------------------------------
   TABLET / CELULAR EN HORIZONTAL O VERTICAL
------------------------------------------------------- */

@media(max-width:800px){
  #heroPlayer:fullscreen,
  #heroPlayer:-webkit-full-screen,
  #heroPlayer.tv-fullscreen-style,
  #heroPlayer.tv-theater{
    padding:8px!important;
    gap:7px!important;
  }

  #heroPlayer:fullscreen .hero-info,
  #heroPlayer:-webkit-full-screen .hero-info,
  #heroPlayer.tv-fullscreen-style .hero-info,
  #heroPlayer.tv-theater .hero-info{
    grid-template-columns:1fr!important;
    grid-template-areas:
      "name"
      "controls"
      "volume"!important;
    gap:5px!important;
    padding:8px!important;
  }

  #heroPlayer:fullscreen .hero-info p,
  #heroPlayer:-webkit-full-screen .hero-info p,
  #heroPlayer.tv-fullscreen-style .hero-info p,
  #heroPlayer.tv-theater .hero-info p{
    display:none!important;
  }

  #heroPlayer:fullscreen .controls,
  #heroPlayer:-webkit-full-screen .controls,
  #heroPlayer.tv-fullscreen-style .controls,
  #heroPlayer.tv-theater .controls{
    justify-content:flex-start!important;
    overflow-x:auto!important;
  }

  #heroPlayer:fullscreen .volume-row,
  #heroPlayer:-webkit-full-screen .volume-row,
  #heroPlayer.tv-fullscreen-style .volume-row,
  #heroPlayer.tv-theater .volume-row{
    width:100%!important;
    max-width:none!important;
  }
}

@media(max-height:540px){
  #heroPlayer:fullscreen,
  #heroPlayer:-webkit-full-screen,
  #heroPlayer.tv-fullscreen-style,
  #heroPlayer.tv-theater{
    grid-template-rows:minmax(0,1fr) 64px!important;
    padding:6px 8px!important;
  }

  #heroPlayer:fullscreen .hero-info,
  #heroPlayer:-webkit-full-screen .hero-info,
  #heroPlayer.tv-fullscreen-style .hero-info,
  #heroPlayer.tv-theater .hero-info{
    grid-template-columns:minmax(160px,1fr) auto!important;
    grid-template-areas:"name controls"!important;
    padding:6px 10px!important;
  }

  #heroPlayer:fullscreen .hero-info p,
  #heroPlayer:-webkit-full-screen .hero-info p,
  #heroPlayer.tv-fullscreen-style .hero-info p,
  #heroPlayer.tv-theater .hero-info p,
  #heroPlayer:fullscreen .volume-row,
  #heroPlayer:-webkit-full-screen .volume-row,
  #heroPlayer.tv-fullscreen-style .volume-row,
  #heroPlayer.tv-theater .volume-row{
    display:none!important;
  }
}

/* ===== public_v080.css ===== */

/* Sintonía+ 0.6.20 — TV por idioma */

.language-filter{
  margin:2px 0 5px;
}

.language-filter-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:0 0 7px;
  padding:0 2px;
}

.language-filter-head strong{
  color:#e5f3fb;
  font-size:13px;
}

.language-filter-head span{
  color:#7f9bad;
  font-size:11px;
}

.smart-language-bar{
  margin-bottom:7px;
  padding-bottom:8px!important;
}

.smart-language-bar a{
  border-color:#23516a!important;
}

.smart-language-bar a.active{
  background:linear-gradient(
    135deg,
    #1687ea,
    #12bfa9
  )!important;
  border-color:#20d2c1!important;
}

.smart-language-bar small,
.smart-category-bar small{
  opacity:.68;
  font-size:10px;
  margin-left:3px;
}

/* Países siguen horizontales; TV internacional puede tener bastantes. */
.country-inner{
  overflow-x:auto;
  scrollbar-width:thin;
}

@media(max-width:700px){
  .language-filter-head{
    align-items:flex-start;
    flex-direction:column;
    gap:2px;
  }
}

/* ===== public_v081.css ===== */
/* Sintonía+ 0.6.21 — reproductor TV flotante */
.tv-float-button{height:36px;border:1px solid #2b627d;border-radius:10px;padding:0 11px;background:#12334a;color:#e5f7ff;font-weight:900;cursor:pointer;white-space:nowrap}.tv-float-button:hover{background:#174b69;border-color:#25b9d2;color:#fff}
#heroPlayer.tv-floating{position:fixed!important;z-index:16000!important;width:640px!important;min-width:360px!important;min-height:250px!important;max-width:calc(100vw - 18px)!important;max-height:calc(100vh - 18px)!important;margin:0!important;padding:46px 12px 12px!important;box-sizing:border-box!important;background:#061827f7!important;border:1px solid #2a789c!important;border-radius:16px!important;box-shadow:0 24px 90px #000c!important;overflow:auto!important;resize:both!important;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
#heroPlayer.tv-floating .floating-player-toolbar{display:flex!important}.floating-player-toolbar{position:absolute;top:0;left:0;right:0;height:40px;align-items:center;justify-content:space-between;gap:10px;padding:0 8px 0 12px;background:#0b2233f2;border-bottom:1px solid #25556d;border-radius:15px 15px 0 0;user-select:none}.floating-drag-handle{flex:1;min-width:0;display:flex;align-items:center;gap:8px;color:#d9f2ff;font-size:12px;font-weight:900;cursor:move;touch-action:none}.floating-dots{font-size:18px;color:#65cce8}.floating-window-actions{display:flex;gap:5px}.floating-window-actions button{width:30px;height:30px;display:grid;place-items:center;border:1px solid #315267;border-radius:8px;background:#102b3d;color:#fff;font-size:15px;font-weight:900;cursor:pointer}.floating-window-actions button:hover{background:#19465f}
#heroPlayer.tv-floating .hero-logo-wrap{width:100%!important;max-width:none!important;min-width:0!important;aspect-ratio:16/9!important;height:auto!important;margin:0!important;background:#000!important;border-radius:11px!important;overflow:hidden!important;position:relative!important}#heroPlayer.tv-floating .hero-video{display:block!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;object-fit:contain!important;background:#000!important}#heroPlayer.tv-floating .hero-info{width:100%!important;max-width:none!important;display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;grid-template-areas:"title controls" "meta controls" "volume volume"!important;gap:4px 12px!important;margin:10px 0 0!important;padding:0!important}#heroPlayer.tv-floating .hero-info h1{grid-area:title!important;font-size:18px!important;margin:0!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}#heroPlayer.tv-floating .hero-info p{grid-area:meta!important;margin:0!important;font-size:11px!important}#heroPlayer.tv-floating .controls{grid-area:controls!important;display:flex!important;justify-content:flex-end!important;align-items:center!important;flex-wrap:wrap!important;gap:6px!important;margin:0!important}#heroPlayer.tv-floating .volume-row{grid-area:volume!important;width:100%!important;max-width:none!important;margin:3px 0 0!important}#heroPlayer.tv-floating .live-badge{position:absolute!important;top:54px!important;left:20px!important;z-index:4!important}
#heroPlayer.tv-floating.tv-floating-minimized{width:360px!important;height:54px!important;min-height:54px!important;max-height:54px!important;padding:42px 8px 6px!important;resize:none!important;overflow:hidden!important}#heroPlayer.tv-floating.tv-floating-minimized .hero-logo-wrap,#heroPlayer.tv-floating.tv-floating-minimized .hero-info,#heroPlayer.tv-floating.tv-floating-minimized .eq{display:none!important}#heroPlayer.tv-floating:not(.tv-floating-minimized)::after{content:'↘';position:absolute;right:5px;bottom:3px;color:#6fcfe8;font-size:15px;pointer-events:none;opacity:.85}
@media(max-width:700px){.tv-float-button{height:34px;padding:0 8px;font-size:11px}#heroPlayer.tv-floating{left:8px!important;right:8px!important;bottom:8px!important;top:auto!important;width:auto!important;max-width:none!important;min-width:0!important;max-height:78vh!important;resize:none!important}#heroPlayer.tv-floating .hero-info{grid-template-columns:1fr!important;grid-template-areas:"title" "meta" "controls" "volume"!important}#heroPlayer.tv-floating .controls{justify-content:flex-start!important}#heroPlayer.tv-floating.tv-floating-minimized{left:8px!important;right:8px!important;width:auto!important}}

/* ===== public_v082.css ===== */

/* ==========================================================
   Sintonía+ 0.6.22 — flotante estilo YouTube
   Corrige resize bloqueado por !important de 0.6.21
   ========================================================== */

/* La ventana completa es ahora el área de video. */
#heroPlayer.tv-floating{
  position:fixed!important;
  z-index:16000!important;

  width:720px!important;
  height:455px!important;

  min-width:380px!important;
  min-height:240px!important;

  max-width:calc(100vw - 8px)!important;
  max-height:calc(100vh - 8px)!important;

  margin:0!important;
  padding:0!important;

  display:block!important;

  background:#000!important;
  border:1px solid #346f8b!important;
  border-radius:14px!important;

  overflow:hidden!important;

  /* Ya no usamos el resize nativo que estaba bloqueado. */
  resize:none!important;

  box-shadow:0 24px 90px #000d!important;
}

/* Ocultar decoraciones originales. */
#heroPlayer.tv-floating .eq{
  display:none!important;
}

/* Video / imagen ocupan TODA la ventana, como YouTube. */
#heroPlayer.tv-floating .hero-logo-wrap{
  position:absolute!important;
  inset:0!important;

  width:100%!important;
  height:100%!important;
  max-width:none!important;
  min-width:0!important;

  aspect-ratio:auto!important;

  margin:0!important;
  padding:0!important;

  border:0!important;
  border-radius:13px!important;

  background:#000!important;
  overflow:hidden!important;
}

#heroPlayer.tv-floating .hero-video,
#heroPlayer.tv-floating .hero-logo{
  position:absolute!important;
  inset:0!important;

  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;

  margin:0!important;

  object-fit:contain!important;
  object-position:center!important;

  background:#000!important;
}

/* Cuando el video está activo, la imagen queda por debajo. */
#heroPlayer.tv-floating .hero-video{
  z-index:2!important;
}

#heroPlayer.tv-floating .hero-logo{
  z-index:1!important;
}

/* ----------------------------------------------------------
   BARRA SUPERIOR: mover/minimizar/acoplar/cerrar
   Se oculta como los controles de YouTube.
   ---------------------------------------------------------- */
#heroPlayer.tv-floating .floating-player-toolbar{
  position:absolute!important;
  z-index:40!important;

  top:0!important;
  left:0!important;
  right:0!important;

  height:48px!important;

  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;

  padding:0 9px 0 13px!important;

  background:linear-gradient(
    to bottom,
    #000d,
    #0008,
    transparent
  )!important;

  border:0!important;
  border-radius:13px 13px 0 0!important;

  opacity:0!important;
  transform:translateY(-5px)!important;
  pointer-events:none!important;

  transition:
    opacity .18s ease,
    transform .18s ease!important;
}

#heroPlayer.tv-floating.tv-controls-visible .floating-player-toolbar,
#heroPlayer.tv-floating.tv-controls-pinned .floating-player-toolbar{
  opacity:1!important;
  transform:translateY(0)!important;
  pointer-events:auto!important;
}

#heroPlayer.tv-floating .floating-drag-handle{
  height:100%!important;
  cursor:move!important;
  color:#fff!important;
  text-shadow:0 1px 4px #000!important;
}

#heroPlayer.tv-floating .floating-dots{
  color:#fff!important;
  opacity:.85!important;
}

#heroPlayer.tv-floating .floating-window-actions button{
  width:32px!important;
  height:32px!important;

  border:0!important;
  border-radius:50%!important;

  background:#101010aa!important;
  color:#fff!important;

  font-size:15px!important;
}

#heroPlayer.tv-floating .floating-window-actions button:hover{
  background:#ffffff2b!important;
}

/* ----------------------------------------------------------
   CONTROLES INFERIORES estilo YouTube
   ---------------------------------------------------------- */
#heroPlayer.tv-floating .hero-info{
  position:absolute!important;
  z-index:35!important;

  left:0!important;
  right:0!important;
  bottom:0!important;

  width:auto!important;
  max-width:none!important;

  margin:0!important;
  padding:54px 15px 12px!important;

  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  grid-template-areas:
    "title title"
    "meta meta"
    "volume volume"
    "controls controls"!important;

  gap:4px!important;

  background:linear-gradient(
    to top,
    #000f 0%,
    #000c 38%,
    #0005 72%,
    transparent 100%
  )!important;

  opacity:0!important;
  transform:translateY(8px)!important;
  pointer-events:none!important;

  transition:
    opacity .18s ease,
    transform .18s ease!important;
}

#heroPlayer.tv-floating.tv-controls-visible .hero-info,
#heroPlayer.tv-floating.tv-controls-pinned .hero-info{
  opacity:1!important;
  transform:translateY(0)!important;
  pointer-events:auto!important;
}

/* Badge arriba queda integrado y solo aparece con controles. */
#heroPlayer.tv-floating .live-badge{
  position:absolute!important;
  top:-9999px!important;
}

#heroPlayer.tv-floating .hero-info h1{
  grid-area:title!important;

  margin:0!important;

  color:#fff!important;
  font-size:18px!important;
  line-height:1.2!important;

  text-shadow:0 1px 5px #000!important;

  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

#heroPlayer.tv-floating .hero-info p{
  grid-area:meta!important;

  margin:0 0 4px!important;

  color:#d5d5d5!important;
  font-size:11px!important;

  text-shadow:0 1px 4px #000!important;

  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

/* Volumen + estado como una barra delgada encima de controles */
#heroPlayer.tv-floating .volume-row{
  grid-area:volume!important;

  width:100%!important;
  max-width:none!important;

  display:grid!important;
  grid-template-columns:24px minmax(80px,1fr) auto!important;
  align-items:center!important;
  gap:8px!important;

  margin:2px 0 5px!important;

  color:#fff!important;
  font-size:11px!important;
}

#heroPlayer.tv-floating .volume-row input[type="range"]{
  width:100%!important;
  cursor:pointer!important;
}

/* Botones inferiores */
#heroPlayer.tv-floating .controls{
  grid-area:controls!important;

  width:100%!important;

  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;

  gap:7px!important;

  margin:0!important;
  padding:0!important;
}

/* Botones redondos compactos */
#heroPlayer.tv-floating .round.small,
#heroPlayer.tv-floating .round.playbig{
  width:38px!important;
  height:38px!important;

  min-width:38px!important;
  min-height:38px!important;

  border:0!important;
  border-radius:50%!important;

  background:#101010b8!important;
  color:#fff!important;

  box-shadow:none!important;
}

#heroPlayer.tv-floating .round.playbig{
  width:42px!important;
  height:42px!important;
  min-width:42px!important;
  min-height:42px!important;
}

#heroPlayer.tv-floating .round.small:hover,
#heroPlayer.tv-floating .round.playbig:hover{
  background:#ffffff2c!important;
}

/* En flotante: Ampliar / Acoplar / Reportar pasan a iconos compactos. */
#heroPlayer.tv-floating .tv-expand-button,
#heroPlayer.tv-floating .tv-float-button,
#heroPlayer.tv-floating .report-stream-btn{
  position:relative!important;

  width:38px!important;
  height:38px!important;

  min-width:38px!important;

  padding:0!important;

  border:0!important;
  border-radius:50%!important;

  background:#101010b8!important;
  color:#fff!important;

  font-size:0!important;

  display:grid!important;
  place-items:center!important;
}

#heroPlayer.tv-floating .tv-expand-button::before{
  content:'⛶';
  font-size:18px;
}

#heroPlayer.tv-floating .tv-float-button::before{
  content:'↩';
  font-size:18px;
}

#heroPlayer.tv-floating .report-stream-btn::before{
  content:'⚠';
  font-size:17px;
}

#heroPlayer.tv-floating .tv-expand-button:hover,
#heroPlayer.tv-floating .tv-float-button:hover,
#heroPlayer.tv-floating .report-stream-btn:hover{
  background:#ffffff2c!important;
}

/* ----------------------------------------------------------
   RESIZE CUSTOM — 8 bordes/esquinas
   ---------------------------------------------------------- */
#heroPlayer.tv-floating .float-resize-handle{
  position:absolute!important;
  z-index:80!important;

  display:block!important;

  background:transparent!important;

  touch-action:none!important;
}

#heroPlayer.tv-floating .float-resize-n{
  left:10px;
  right:10px;
  top:-3px;
  height:9px;
  cursor:n-resize;
}

#heroPlayer.tv-floating .float-resize-s{
  left:10px;
  right:10px;
  bottom:-3px;
  height:9px;
  cursor:s-resize;
}

#heroPlayer.tv-floating .float-resize-e{
  top:10px;
  bottom:10px;
  right:-3px;
  width:9px;
  cursor:e-resize;
}

#heroPlayer.tv-floating .float-resize-w{
  top:10px;
  bottom:10px;
  left:-3px;
  width:9px;
  cursor:w-resize;
}

#heroPlayer.tv-floating .float-resize-ne{
  top:-4px;
  right:-4px;
  width:18px;
  height:18px;
  cursor:ne-resize;
}

#heroPlayer.tv-floating .float-resize-nw{
  top:-4px;
  left:-4px;
  width:18px;
  height:18px;
  cursor:nw-resize;
}

#heroPlayer.tv-floating .float-resize-se{
  right:-5px;
  bottom:-5px;
  width:24px;
  height:24px;
  cursor:se-resize;
}

#heroPlayer.tv-floating .float-resize-sw{
  left:-5px;
  bottom:-5px;
  width:24px;
  height:24px;
  cursor:sw-resize;
}

/* Marca discreta tipo esquina de ventana. */
#heroPlayer.tv-floating .float-resize-se::after{
  content:'';
  position:absolute;
  right:4px;
  bottom:4px;

  width:11px;
  height:11px;

  border-right:2px solid #fff9;
  border-bottom:2px solid #fff9;

  border-radius:0 0 2px 0;

  opacity:.6;
}

/* Mientras se redimensiona o mueve no animamos. */
#heroPlayer.tv-floating.tv-window-dragging,
#heroPlayer.tv-floating.tv-window-resizing{
  transition:none!important;
  user-select:none!important;
}

/* ----------------------------------------------------------
   MINIMIZADO
   ---------------------------------------------------------- */
#heroPlayer.tv-floating.tv-floating-minimized{
  width:320px!important;
  height:48px!important;

  min-width:260px!important;
  min-height:48px!important;
  max-height:48px!important;

  padding:0!important;

  background:#071824f6!important;

  overflow:hidden!important;
}

#heroPlayer.tv-floating.tv-floating-minimized .hero-logo-wrap,
#heroPlayer.tv-floating.tv-floating-minimized .hero-info,
#heroPlayer.tv-floating.tv-floating-minimized .float-resize-handle{
  display:none!important;
}

#heroPlayer.tv-floating.tv-floating-minimized .floating-player-toolbar{
  height:48px!important;

  opacity:1!important;
  transform:none!important;
  pointer-events:auto!important;

  background:#071824f6!important;
}

/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */
@media(max-width:700px){
  #heroPlayer.tv-floating{
    left:6px!important;
    right:6px!important;
    bottom:6px!important;
    top:auto!important;

    width:calc(100vw - 12px)!important;
    height:min(58vw, 360px)!important;

    min-width:0!important;
    min-height:210px!important;

    max-width:none!important;
    max-height:70vh!important;

    border-radius:12px!important;
  }

  #heroPlayer.tv-floating .float-resize-handle{
    display:none!important;
  }

  #heroPlayer.tv-floating .hero-info{
    padding:48px 10px 8px!important;
  }

  #heroPlayer.tv-floating .hero-info h1{
    font-size:15px!important;
  }

  #heroPlayer.tv-floating .hero-info p{
    display:none!important;
  }

  #heroPlayer.tv-floating .controls{
    gap:4px!important;
  }

  #heroPlayer.tv-floating .round.small,
  #heroPlayer.tv-floating .round.playbig,
  #heroPlayer.tv-floating .tv-expand-button,
  #heroPlayer.tv-floating .tv-float-button,
  #heroPlayer.tv-floating .report-stream-btn{
    width:34px!important;
    height:34px!important;
    min-width:34px!important;
    min-height:34px!important;
  }

  #heroPlayer.tv-floating.tv-floating-minimized{
    left:6px!important;
    right:6px!important;
    bottom:6px!important;

    width:calc(100vw - 12px)!important;
    height:48px!important;

    min-height:48px!important;
  }
}

/* ===== public_v083.css ===== */

/* ==========================================================
   Sintonía+ 0.6.23 — Reproductor principal TV tipo YouTube
   ========================================================== */

/* Solo afecta TV normal, nunca radio. */
body.tv-page #heroPlayer:not(.tv-floating):not(.tv-theater):not(.tv-fullscreen-style){
  position:relative!important;

  width:100%!important;
  max-width:none!important;
  min-width:0!important;

  height:auto!important;
  min-height:0!important;

  display:block!important;

  padding:0!important;
  margin:0!important;

  background:#000!important;
  border:1px solid #21465c!important;
  border-radius:14px!important;

  overflow:hidden!important;

  aspect-ratio:16 / 9!important;

  box-shadow:0 12px 36px #0005!important;
}

/*
 * La caja donde está video/logo ocupa todo el reproductor.
 */
body.tv-page #heroPlayer:not(.tv-floating):not(.tv-theater):not(.tv-fullscreen-style) .hero-logo-wrap{
  position:absolute!important;
  inset:0!important;

  width:100%!important;
  height:100%!important;

  max-width:none!important;
  max-height:none!important;
  min-width:0!important;
  min-height:0!important;

  aspect-ratio:auto!important;

  margin:0!important;
  padding:0!important;

  display:block!important;

  border:0!important;
  border-radius:13px!important;

  background:#000!important;
  overflow:hidden!important;
}

/* Video y logo adaptables como YouTube. */
body.tv-page #heroPlayer:not(.tv-floating):not(.tv-theater):not(.tv-fullscreen-style) .hero-video,
body.tv-page #heroPlayer:not(.tv-floating):not(.tv-theater):not(.tv-fullscreen-style) .hero-logo{
  position:absolute!important;
  inset:0!important;

  width:100%!important;
  height:100%!important;

  max-width:none!important;
  max-height:none!important;

  margin:0!important;
  padding:0!important;

  object-fit:contain!important;
  object-position:center center!important;

  background:#000!important;
}

body.tv-page #heroPlayer:not(.tv-floating):not(.tv-theater):not(.tv-fullscreen-style) .hero-video{
  z-index:2!important;
}

body.tv-page #heroPlayer:not(.tv-floating):not(.tv-theater):not(.tv-fullscreen-style) .hero-logo{
  z-index:1!important;
}

/* Decoración original fuera */
body.tv-page #heroPlayer:not(.tv-floating):not(.tv-theater):not(.tv-fullscreen-style) .eq{
  display:none!important;
}

/* ==========================================================
   OVERLAY INFERIOR NORMAL
   ========================================================== */
body.tv-page #heroPlayer:not(.tv-floating):not(.tv-theater):not(.tv-fullscreen-style) .hero-info{
  position:absolute!important;
  z-index:25!important;

  left:0!important;
  right:0!important;
  bottom:0!important;

  width:auto!important;
  max-width:none!important;

  margin:0!important;

  padding:
    clamp(44px,7vw,90px)
    clamp(10px,2vw,18px)
    clamp(10px,1.5vw,16px)!important;

  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  grid-template-areas:
    "title controls"
    "meta controls"
    "volume volume"!important;

  gap:3px 14px!important;

  background:linear-gradient(
    to top,
    #000f 0%,
    #000c 36%,
    #0006 67%,
    transparent 100%
  )!important;

  opacity:0!important;
  transform:translateY(8px)!important;
  pointer-events:none!important;

  transition:
    opacity .18s ease,
    transform .18s ease!important;
}

/* mostrar al pasar el mouse o cuando JS lo solicita */
body.tv-page #heroPlayer.main-controls-visible:not(.tv-floating) .hero-info,
body.tv-page #heroPlayer.main-controls-pinned:not(.tv-floating) .hero-info{
  opacity:1!important;
  transform:translateY(0)!important;
  pointer-events:auto!important;
}

/* En dispositivos táctiles los controles siempre accesibles. */
@media(hover:none){
  body.tv-page #heroPlayer:not(.tv-floating):not(.tv-theater):not(.tv-fullscreen-style) .hero-info{
    opacity:1!important;
    transform:none!important;
    pointer-events:auto!important;
  }
}

/* Título */
body.tv-page #heroPlayer:not(.tv-floating):not(.tv-theater):not(.tv-fullscreen-style) .hero-info h1{
  grid-area:title!important;

  margin:0!important;

  color:#fff!important;

  font-size:clamp(15px,2.1vw,24px)!important;
  line-height:1.12!important;

  text-shadow:0 1px 5px #000!important;

  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

body.tv-page #heroPlayer:not(.tv-floating):not(.tv-theater):not(.tv-fullscreen-style) .hero-info p{
  grid-area:meta!important;

  margin:0!important;

  color:#d1dae0!important;

  font-size:clamp(10px,1.1vw,12px)!important;

  text-shadow:0 1px 4px #000!important;
}

/* Badge EN VIVO */
body.tv-page #heroPlayer:not(.tv-floating):not(.tv-theater):not(.tv-fullscreen-style) .live-badge{
  position:absolute!important;

  z-index:28!important;

  top:12px!important;
  left:12px!important;

  margin:0!important;
}

/* Controles a la derecha, estilo compacto */
body.tv-page #heroPlayer:not(.tv-floating):not(.tv-theater):not(.tv-fullscreen-style) .controls{
  grid-area:controls!important;

  display:flex!important;

  align-items:center!important;
  justify-content:flex-end!important;

  flex-wrap:wrap!important;

  gap:6px!important;

  margin:0!important;
  padding:0!important;
}

/* Volumen debajo */
body.tv-page #heroPlayer:not(.tv-floating):not(.tv-theater):not(.tv-fullscreen-style) .volume-row{
  grid-area:volume!important;

  width:100%!important;
  max-width:none!important;

  display:grid!important;
  grid-template-columns:24px minmax(80px,1fr) auto!important;

  gap:8px!important;

  align-items:center!important;

  margin:4px 0 0!important;

  color:#fff!important;

  font-size:11px!important;
}

body.tv-page #heroPlayer:not(.tv-floating):not(.tv-theater):not(.tv-fullscreen-style) .volume-row input[type="range"]{
  width:100%!important;
}

/* Botones estilo YouTube */
body.tv-page #heroPlayer:not(.tv-floating):not(.tv-theater):not(.tv-fullscreen-style) .round.small,
body.tv-page #heroPlayer:not(.tv-floating):not(.tv-theater):not(.tv-fullscreen-style) .round.playbig{
  width:clamp(34px,4vw,44px)!important;
  height:clamp(34px,4vw,44px)!important;

  min-width:34px!important;
  min-height:34px!important;

  border:0!important;
  border-radius:50%!important;

  background:#111c!important;
  color:#fff!important;

  box-shadow:none!important;
}

body.tv-page #heroPlayer:not(.tv-floating):not(.tv-theater):not(.tv-fullscreen-style) .round.small:hover,
body.tv-page #heroPlayer:not(.tv-floating):not(.tv-theater):not(.tv-fullscreen-style) .round.playbig:hover{
  background:#ffffff2f!important;
}

/* Acciones: iconos compactos */
body.tv-page #heroPlayer:not(.tv-floating):not(.tv-theater):not(.tv-fullscreen-style) .tv-expand-button,
body.tv-page #heroPlayer:not(.tv-floating):not(.tv-theater):not(.tv-fullscreen-style) .tv-float-button,
body.tv-page #heroPlayer:not(.tv-floating):not(.tv-theater):not(.tv-fullscreen-style) .report-stream-btn{
  width:clamp(34px,4vw,42px)!important;
  height:clamp(34px,4vw,42px)!important;

  min-width:34px!important;

  padding:0!important;

  display:grid!important;
  place-items:center!important;

  border:0!important;
  border-radius:50%!important;

  background:#111c!important;
  color:#fff!important;

  font-size:0!important;
}

body.tv-page #heroPlayer:not(.tv-floating):not(.tv-theater):not(.tv-fullscreen-style) .tv-expand-button::before{
  content:'⛶';
  font-size:18px;
}

body.tv-page #heroPlayer:not(.tv-floating):not(.tv-theater):not(.tv-fullscreen-style) .tv-float-button::before{
  content:'▱';
  font-size:18px;
}

body.tv-page #heroPlayer:not(.tv-floating):not(.tv-theater):not(.tv-fullscreen-style) .report-stream-btn::before{
  content:'⚠';
  font-size:16px;
}

body.tv-page #heroPlayer:not(.tv-floating):not(.tv-theater):not(.tv-fullscreen-style) .tv-expand-button:hover,
body.tv-page #heroPlayer:not(.tv-floating):not(.tv-theater):not(.tv-fullscreen-style) .tv-float-button:hover,
body.tv-page #heroPlayer:not(.tv-floating):not(.tv-theater):not(.tv-fullscreen-style) .report-stream-btn:hover{
  background:#ffffff2f!important;
}

/* ==========================================================
   DISTRIBUCIÓN PRINCIPAL
   El reproductor crece con la pantalla.
   ========================================================== */

/*
 * El contenedor que suele tener reproductor + populares
 * usa una proporción más parecida a YouTube:
 * video grande + columna lateral.
 */
body.tv-page .player-area,
body.tv-page .hero-layout,
body.tv-page .player-and-popular{
  align-items:start!important;
}

/* En pantallas grandes, el video gana más espacio */
@media(min-width:1100px){
  body.tv-page .player-area,
  body.tv-page .hero-layout,
  body.tv-page .player-and-popular{
    grid-template-columns:minmax(0,1.65fr) minmax(280px,.75fr)!important;
  }
}

/* Tablet: video arriba y populares abajo */
@media(max-width:980px){
  body.tv-page .player-area,
  body.tv-page .hero-layout,
  body.tv-page .player-and-popular{
    grid-template-columns:1fr!important;
  }
}

/* En móvil, pantalla completa de ancho disponible */
@media(max-width:700px){
  body.tv-page #heroPlayer:not(.tv-floating):not(.tv-theater):not(.tv-fullscreen-style){
    width:100%!important;
    border-radius:10px!important;
  }

  body.tv-page #heroPlayer:not(.tv-floating):not(.tv-theater):not(.tv-fullscreen-style) .hero-info{
    padding:
      38px
      9px
      8px!important;

    grid-template-columns:1fr!important;
    grid-template-areas:
      "title"
      "meta"
      "volume"
      "controls"!important;

    gap:3px!important;
  }

  body.tv-page #heroPlayer:not(.tv-floating):not(.tv-theater):not(.tv-fullscreen-style) .controls{
    justify-content:flex-start!important;
  }

  body.tv-page #heroPlayer:not(.tv-floating):not(.tv-theater):not(.tv-fullscreen-style) .hero-info p{
    display:none!important;
  }
}

/* Pantallas muy anchas: limitar el ancho de contenido general,
   pero dejar el video grande dentro de él. */
@media(min-width:1700px){
  body.tv-page .public-main,
  body.tv-page .main-content,
  body.tv-page .page-shell{
    max-width:1680px!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
}

/* ===== public_v084.css ===== */

/* =========================================================
   Sintonía+ 0.6.24
   Fix controles principal + recomendados
   ========================================================= */

/*
 * FALLBACK SIN JAVASCRIPT:
 * si JS tardara o fallara, al pasar el mouse los controles deben aparecer.
 */
body.tv-page
#heroPlayer:not(.tv-floating):not(.tv-theater):not(.tv-fullscreen-style):hover
.hero-info{
  opacity:1!important;
  transform:translateY(0)!important;
  pointer-events:auto!important;
}

/*
 * Pero cuando JS decide ocultarlos (como YouTube), esta regla gana.
 */
body.tv-page
#heroPlayer.main-controls-hidden:not(.tv-floating):not(.tv-theater):not(.tv-fullscreen-style):hover
.hero-info{
  opacity:0!important;
  transform:translateY(8px)!important;
  pointer-events:none!important;
}

/* Un movimiento nuevo vuelve a mostrarlos. */
body.tv-page
#heroPlayer.main-controls-visible:not(.tv-floating):not(.tv-theater):not(.tv-fullscreen-style)
.hero-info,
body.tv-page
#heroPlayer.main-controls-pinned:not(.tv-floating):not(.tv-theater):not(.tv-fullscreen-style)
.hero-info{
  opacity:1!important;
  transform:translateY(0)!important;
  pointer-events:auto!important;
}

/*
 * La zona de controles no puede quedar detrás del video.
 */
body.tv-page
#heroPlayer:not(.tv-floating):not(.tv-theater):not(.tv-fullscreen-style)
.hero-info{
  z-index:60!important;
}

body.tv-page
#heroPlayer:not(.tv-floating):not(.tv-theater):not(.tv-fullscreen-style)
.hero-video{
  z-index:2!important;
}

/* Cursor ayuda a descubrir que hay controles. */
body.tv-page
#heroPlayer:not(.tv-floating):not(.tv-theater):not(.tv-fullscreen-style){
  cursor:default;
}

/* Subtítulo de recomendaciones ligeramente más visible. */
.quick-stations-head small{
  display:block;
  margin-top:2px;
  color:#78a8c2;
}

/* ===== 0.7.1 polish ===== */

/* ==========================================================
   Sintonía+ 0.7.1 — interfaz pública de producción
   ========================================================== */

:root{
  --sp-bg:#061019;
  --sp-panel:#0b1a26;
  --sp-panel-2:#0d2231;
  --sp-line:#19384b;
  --sp-text:#f4f8fb;
  --sp-muted:#8fa8b9;
  --sp-accent:#18bec8;
  --sp-blue:#178df1;
  --sp-radius:15px;
}

html{scroll-behavior:smooth}
body{
  background:
    radial-gradient(circle at 12% 0,#0d304533,transparent 30%),
    var(--sp-bg)!important;
}

/* contenedor principal más respirado */
.shell{
  width:min(96%,1540px)!important;
  margin-inline:auto!important;
}

.page{
  padding-top:14px!important;
  padding-bottom:34px!important;
}

/* Barra de países más limpia y desplazable. */
.country-strip{
  border-bottom:1px solid #12354a!important;
  background:#052131f5!important;
}

.country-inner{
  min-height:48px!important;
  gap:5px!important;
  overflow-x:auto!important;
  scrollbar-width:none!important;
}
.country-inner::-webkit-scrollbar{display:none}

.country-chip{
  flex:0 0 auto!important;
  border-radius:999px!important;
  min-height:32px!important;
}

/* Cabecera principal */
.topbar{
  background:#071520ed!important;
  border-bottom:1px solid #173246!important;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

.topbar-inner{
  min-height:88px!important;
  display:grid!important;
  grid-template-columns:auto minmax(260px,680px) 1fr auto!important;
  align-items:center!important;
  gap:18px!important;
}

.topbar .brand{
  white-space:nowrap!important;
}

.topbar .search{
  width:100%!important;
  max-width:none!important;
}

.peru-default{
  justify-self:end!important;
  white-space:nowrap!important;
}

/* Selector principal Radio / TV */
.quick-filters{
  display:flex!important;
  justify-content:center!important;
  gap:8px!important;
  margin:8px 0 13px!important;
}

.quick-filters .pill{
  min-height:40px!important;
  padding-inline:18px!important;
  border-radius:999px!important;
}

/* Idiomas y categorías: una zona de filtros clara */
.language-filter{
  padding:10px 12px 3px!important;
  margin-bottom:8px!important;
  background:#091a27!important;
  border:1px solid #173548!important;
  border-radius:13px!important;
}

.tv-category-bar{
  overflow-x:auto!important;
  flex-wrap:nowrap!important;
  scrollbar-width:none!important;
  padding:5px 2px 9px!important;
}
.tv-category-bar::-webkit-scrollbar{display:none}

.tv-category-bar a{
  flex:0 0 auto!important;
  white-space:nowrap!important;
}

/* La segunda pareja de pestañas repetía Radio/TV; dejamos una sola navegación. */
.media-tabs{
  display:none!important;
}

/* Estructura general */
.layout{
  grid-template-columns:minmax(0,1fr) 285px!important;
  gap:18px!important;
  align-items:start!important;
}

.maincol{
  min-width:0!important;
}

.sidecol{
  position:sticky!important;
  top:16px!important;
  align-self:start!important;
}

/* Reproductor + recomendados */
.player-stage{
  margin-top:0!important;
  gap:14px!important;
  border-radius:var(--sp-radius)!important;
}

.quick-stations-panel{
  border-radius:var(--sp-radius)!important;
  background:linear-gradient(180deg,#0b2130,#081a27)!important;
  box-shadow:0 12px 35px #0003!important;
}

.quick-stations-grid{
  gap:8px!important;
}

.quick-station{
  transition:transform .14s ease,border-color .14s ease,background .14s ease!important;
}
.quick-station:hover{
  transform:translateY(-2px)!important;
}

/* Título del catálogo */
.section-head{
  margin-top:19px!important;
  padding-bottom:8px!important;
  border-bottom:1px solid #173548!important;
}

.section-head h2{
  font-size:18px!important;
}

/* Tarjetas uniformes y fluidas */
.station-grid{
  display:grid!important;
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr))!important;
  gap:12px!important;
}

.station-card{
  min-width:0!important;
  border-radius:13px!important;
  padding:9px!important;
  transition:
    transform .15s ease,
    border-color .15s ease,
    background .15s ease!important;
}

.station-card:hover{
  transform:translateY(-2px)!important;
  border-color:#24a8cf!important;
}

.station-logo{
  border-radius:10px!important;
  overflow:hidden!important;
}

/* Panel lateral */
.side-card{
  border-radius:14px!important;
  background:#0a1b28!important;
  border-color:#1a3b50!important;
}

.genre-cloud{
  gap:7px!important;
}

.genre-cloud a{
  border-radius:999px!important;
}

/* Modales */
.modal-panel,
.report-panel{
  border-radius:18px!important;
  box-shadow:0 24px 100px #000c!important;
}

/* Footer visual, sin añadir markup */
.page::after{
  content:'Sintonía+ · Radio y TV en vivo';
  display:block;
  margin-top:30px;
  padding-top:18px;
  border-top:1px solid #173044;
  color:#69899d;
  text-align:center;
  font-size:11px;
}

/* Tablet */
@media(max-width:1120px){
  .layout{
    grid-template-columns:1fr!important;
  }

  .sidecol{
    position:static!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:12px!important;
  }
}

/* Cabecera en pantallas medianas */
@media(max-width:900px){
  .topbar-inner{
    grid-template-columns:auto 1fr auto!important;
    min-height:auto!important;
    padding-block:12px!important;
  }

  .topbar .search{
    grid-column:1/-1!important;
    grid-row:2!important;
  }

  .peru-default{
    display:none!important;
  }

  .station-grid{
    grid-template-columns:repeat(auto-fill,minmax(145px,1fr))!important;
  }
}

@media(max-width:650px){
  .shell{
    width:min(100% - 16px,1540px)!important;
  }

  .country-strip .shell{
    width:100%!important;
    padding-inline:8px!important;
  }

  .topbar-inner{
    gap:9px!important;
  }

  .topbar .brand strong{
    font-size:25px!important;
  }

  .quick-filters{
    justify-content:stretch!important;
  }

  .quick-filters .pill{
    flex:1!important;
    text-align:center!important;
    padding-inline:8px!important;
  }

  .language-filter-head span{
    display:none!important;
  }

  .station-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:9px!important;
  }

  .sidecol{
    grid-template-columns:1fr!important;
  }
}


/* ==========================================================
   0.7.8.4 · Calidad adaptativa de TV
   ========================================================== */
.tv-quality-button{
  min-height:38px;
  border:1px solid #2a617b;
  border-radius:999px;
  padding:7px 11px;
  background:#0b2b3c;
  color:#dff8ff;
  font-weight:800;
  cursor:pointer;
  white-space:nowrap;
  transition:.15s ease;
}
.tv-quality-button:hover{
  border-color:#23c7dc;
  background:#10394d;
}
.tv-quality-button.saving{
  border-color:#8b6c25;
  background:#382d12;
  color:#ffe49a;
}
.tv-quality-button:disabled{
  opacity:.78;
  cursor:default;
}

@media(max-width:700px){
  .tv-quality-button{
    min-height:36px;
    padding:6px 9px;
    font-size:11px;
  }
}

/* ===== Sintonía+ 0.7.8.6 · Favoritos integrados en la cuadrícula ===== */
.station-card{position:relative}
.station-card.is-favorite{
  border:2px solid #ff3b4f!important;
  box-shadow:0 0 0 1px #ff3b4f55,0 0 14px #ff3b4f2e!important;
}
.station-card.is-favorite:hover,
.station-card.is-favorite:focus-visible{
  border-color:#ff5a6b!important;
  box-shadow:0 0 0 2px #ff3b4f66,0 0 18px #ff3b4f3d!important;
}
.station-card.is-favorite::after{
  content:'★';
  position:absolute;
  right:8px;
  top:7px;
  z-index:2;
  width:25px;
  height:25px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:#b51526e8;
  color:#fff;
  font-size:15px;
  line-height:1;
  text-shadow:0 1px 3px #000;
  box-shadow:0 0 0 1px #ff7b89aa;
}

/* ===== Sintonía+ 0.7.9.2 · acceso al simulador ===== */
.simulator-link{height:44px;display:flex;align-items:center;gap:7px;padding:0 13px;border-radius:12px;background:linear-gradient(180deg,#12334a,#0c2538);border:1px solid #24506b;color:#e8f7ff;text-decoration:none;font-weight:850;white-space:nowrap;box-shadow:0 7px 20px #0002;transition:.18s}
.simulator-link:hover{transform:translateY(-1px);border-color:#15c7cb;background:linear-gradient(180deg,#13445a,#0d3044)}
@media(max-width:700px){.simulator-link span{display:none}.simulator-link{width:44px;padding:0;justify-content:center}}

/* 0.7.9.3 · acceso a prueba Android */
.playtest-link{height:44px;display:flex;align-items:center;gap:7px;padding:0 13px;border-radius:12px;background:linear-gradient(180deg,#167b4b,#0e5d39);border:1px solid #2da96f;color:#fff;text-decoration:none;font-weight:850;white-space:nowrap;box-shadow:0 7px 20px #0002;transition:.18s}.playtest-link:hover{transform:translateY(-1px);border-color:#53df9a;background:linear-gradient(180deg,#1b9159,#126e44)}
@media(max-width:850px){.playtest-link span,.simulator-link span{display:none}.playtest-link,.simulator-link{width:44px;padding:0;justify-content:center}}
.playtest-link{margin-left:auto}.playtest-link~.admin-link{margin-left:0}

/* ===== Sintonía+ 0.7.9.5 · accesos compactos y discretos ===== */
.topbar-inner{
  grid-template-columns:auto minmax(260px,1fr) auto!important;
}
.topbar-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:7px;
  min-width:0;
  white-space:nowrap;
}
.topbar-actions .peru-default{
  justify-self:auto!important;
  margin-right:2px;
  font-size:12px;
}
.simulator-link,
.playtest-link{
  height:34px!important;
  min-height:34px!important;
  padding:0 10px!important;
  gap:5px!important;
  border-radius:9px!important;
  font-size:12px!important;
  font-weight:750!important;
  box-shadow:none!important;
  margin-left:0!important;
  line-height:1!important;
}
.simulator-link{
  background:#0c2637!important;
  border-color:#24465c!important;
  color:#d7ebf6!important;
}
.simulator-link:hover{
  transform:none!important;
  background:#103146!important;
  border-color:#2c6a84!important;
}
.playtest-link{
  background:#0c3028!important;
  border-color:#24634d!important;
  color:#dff7ec!important;
}
.playtest-link:hover{
  transform:none!important;
  background:#104133!important;
  border-color:#338565!important;
}
.topbar-actions .admin-link{
  width:34px!important;
  height:34px!important;
  margin-left:0!important;
  border-radius:9px!important;
  font-size:14px!important;
}
@media(max-width:900px){
  .topbar-inner{
    grid-template-columns:auto 1fr!important;
  }
  .topbar-actions{
    justify-self:end;
  }
  .topbar .search{
    grid-column:1/-1!important;
    grid-row:2!important;
  }
}
@media(max-width:650px){
  .topbar-actions{
    gap:5px;
  }
  .topbar-actions .peru-default{
    display:none!important;
  }
  .playtest-link span,
  .simulator-link span{
    display:none!important;
  }
  .playtest-link,
  .simulator-link,
  .topbar-actions .admin-link{
    width:34px!important;
    min-width:34px!important;
    padding:0!important;
    justify-content:center!important;
  }
}