/* ===== CSS VARIABLES ===== */
:root{
  --bg:#06070b;
  --sidebar:#0c0d12;
  --card:#101218;
  --card2:#141720;
  --border:rgba(255,255,255,.06);
  --text:#ffffff;
  --text2:#9ea4b5;
  --primary:#ff007f;
  --primary2:#ff3b9d;
  --glow:0 0 40px rgba(255,0,127,.25);
  --radius:16px;
  --sidebar-w:220px;
  --player-h:72px;
  --nav-base-h:65px; 
  --safe-bottom:env(safe-area-inset-bottom, 0px); 
  
  --shadow-soft: 0 4px 30px rgba(0, 0, 0, 0.3);
  --shadow-nav: 0 -4px 30px rgba(0, 0, 0, 0.4);
}
[data-theme="light"]{
  --bg:#f5f6fa;
  --sidebar:#ffffff;
  --card:#ffffff;
  --card2:#f0f1f5;
  --border:rgba(0,0,0,.07);
  --text:#101114;
  --text2:#646b7a;
  --glow:0 10px 40px rgba(0,0,0,.06);
  --shadow-soft: 0 4px 30px rgba(0, 0, 0, 0.04);
  --shadow-nav: 0 -4px 30px rgba(0, 0, 0, 0.04);
}

/* ===== RESET ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Barlow',sans-serif;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  overflow-x:hidden;
  transition:background .3s,color .3s;
}
img{display:block;max-width:100%;}
button{cursor:pointer;border:none;background:none;font-family:inherit;}
a{text-decoration:none;color:inherit;}
ul{list-style:none;}
input{font-family:inherit;}

/* ===== LAYOUT ===== */
.app-wrapper{display:flex;min-height:100vh;}

/* SIDEBAR LEFT */
.sidebar{
  --sidebar-rgb:12,13,18;
  position:fixed;top:0;left:0;
  width:var(--sidebar-w);height:100vh;
  background:var(--sidebar);
  display:flex;flex-direction:column;
  z-index:100;
  transition:transform .3s ease,background .3s;
  overflow-y:auto;
  box-shadow: var(--shadow-soft);
}
[data-theme="light"] .sidebar{
  --sidebar-rgb:255,255,255;
}

.sidebar-logo{
  padding:24px 20px 20px;
  margin-bottom: 10px;
}
.sidebar-logo img {
  width: 100%;
  max-width: 100%;
  height: auto;
}

.sidebar-nav{flex:1;padding:12px 0;}
.nav-item{
  display:flex;align-items:center;gap:12px;
  padding:10px 15px;
  margin: 2px 10px;
  gap: 12px;
  border-radius: 12px;
  color:var(--text2);
  font-size:13.5px;font-weight:500;
  cursor:pointer;
  border-left:3px solid transparent;
  transition:all .2s;
  position:relative;
}
.nav-item:hover{color:var(--text);background:rgba(255,0,127,.06);border-left-color: var(--primary);}
.nav-item.active{
  color:var(--primary);
  border-left-color:var(--primary);
  background:rgba(255,0,127,.08);
  font-weight:600;
}
.nav-item svg{width:17px;height:17px;flex-shrink:0;}

.close-sidebar-btn {
  display: none; 
}

/* MAIN CONTENT */
.main{
  margin-left:var(--sidebar-w);
  flex:1;
  padding-bottom:calc(var(--player-h) + 32px);
  min-height:100vh;
}

/* TOP BAR (desktop) */
.topbar{
  position:sticky;top:0;z-index:90;
  display:flex;align-items:center;gap:12px;
  padding:14px 28px;
  background:#101218e0; 
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--shadow-soft);
}
[data-theme="light"] .topbar{background:rgba(255,255,255,.92);}

.search-wrap{
  flex:1;max-width:380px;
  position:relative;
}
.search-wrap input{
  width:100%;
  background:var(--card2);
  border:1px solid transparent;
  border-radius:12px;
  padding:9px 14px 9px 38px;
  color:var(--text);
  font-size:13.5px;
  outline:none;
  transition:border-color .2s, background .2s;
}
.search-wrap input::placeholder{color:var(--text2);}
.search-wrap input:focus{border-color:var(--primary); background:var(--card);}
.search-wrap svg{
  position:absolute;left:12px;top:50%;transform:translateY(-50%);
  width:16px;height:16px;color:var(--text2);
}
.topbar-actions{display:flex;align-items:center;gap:10px;margin-left:auto;}
.icon-btn{
  position:relative;
  width:38px;height:38px;
  display:flex;align-items:center;justify-content:center;
  background:var(--card2);
  border-radius:10px;
  color:var(--text2);
  transition:all .2s;
  cursor:pointer;
}
.icon-btn:hover{color:var(--primary); transform: translateY(-2px);}
.icon-btn svg{width:18px;height:18px;}
.badge{
  position:absolute;top:5px;right:5px;
  width:8px;height:8px;
  background:var(--primary);
  border-radius:50%;
  border:2px solid var(--sidebar);
}
.user-chip{
  display:flex;align-items:center;gap:8px;
  padding:5px 12px 5px 5px;
  background:var(--card2);
  border-radius:12px;
  cursor:pointer;
  transition:all .2s;
}
.user-chip:hover{background:var(--card);}
.user-avatar{
  width:30px;height:30px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--primary),#7c3aed);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;color:#fff;
}
.user-name{font-size:13px;font-weight:600;}
.user-badge{font-size:10px;color:var(--primary);font-weight:600;}

/* PAGE SECTIONS */
.page{display:none;}
.page.active{display:block;}

.page-title{
  display:flex;align-items:center;gap:10px;
  font-family:'Barlow Condensed',sans-serif;
  font-size:24px;font-weight:800;
  letter-spacing:.5px;
  margin-bottom:22px;
}
.page-title svg{color:var(--primary);}

/* ===== INICIO ===== */
.hero-grid{display:block;margin-bottom:0;width:100%;}

.live-player-card{
  border-radius:var(--radius);
  overflow:hidden;
  position:relative;
  background:#000;
  aspect-ratio:16/9;
  box-shadow: var(--shadow-soft);
  margin-bottom:20px;
  width:100%;
}
.live-badge{
  position:absolute;top:12px;left:12px;z-index:5;
  background:var(--primary);
  color:#fff;
  font-size:10px;font-weight:700;
  letter-spacing:1.5px;
  padding:3px 8px;
  border-radius:6px;
  text-transform:uppercase;
  display:flex;align-items:center;gap:5px;
}
.live-badge::before{
  content:'';width:6px;height:6px;
  background:#fff;border-radius:50%;
  animation:pulse-dot 1.2s infinite;
}
@keyframes pulse-dot{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.5;transform:scale(.8);}}

#tv-video{width:100%;height:100%;object-fit:cover;}
.player-info{
  position:absolute;bottom:12px;left:12px;
  display:flex;align-items:center;gap:10px;
}
.player-logo{
  width:40px;height:40px;border-radius:8px;
  background:var(--primary);
  display:flex;align-items:center;justify-content:center;
  font-family:'Barlow Condensed',sans-serif;
  font-size:11px;font-weight:900;color:#fff;
  letter-spacing:.5px;
}
.player-title{font-size:14px;font-weight:700;}
.player-sub{font-size:11px;color:rgba(255,255,255,.7);}

/* RIGHT PANEL (Desktop global, hidden on mobile logic handled below) */
.right-panel{display:flex;flex-direction:column;gap:16px;}

.radio-live-card{
  background:linear-gradient(135deg,#1a0a2e,#0f0520);
  border-radius:var(--radius);
  padding:18px;
  display:flex;flex-direction:column;gap:12px;
  box-shadow: var(--shadow-soft);
}
[data-theme="light"] .radio-live-card{background:linear-gradient(135deg,#fff0f7,#fce4f3);}
.radio-label{
  display:flex;align-items:center;gap:6px;
  font-size:10px;font-weight:700;letter-spacing:1.5px;
  color:var(--primary);text-transform:uppercase;
}
.radio-label span{
  width:6px;height:6px;background:var(--primary);
  border-radius:50%;animation:pulse-dot 1.2s infinite;
}
.radio-freq{
  font-family:'Barlow Condensed',sans-serif;
  font-size:36px;font-weight:900;color:var(--text);
  line-height:1;
}
.radio-freq small{font-size:16px;font-weight:600;color:var(--text2);}
.waveform{
  height:32px;display:flex;align-items:center;gap:2px;
}
.waveform span{
  display:block;width:3px;
  background:var(--primary);
  border-radius:3px;
  animation:wave 1s ease-in-out infinite;
}
.waveform span:nth-child(1){height:8px;animation-delay:0s;}
.waveform span:nth-child(2){height:16px;animation-delay:.1s;}
.waveform span:nth-child(3){height:24px;animation-delay:.2s;}
.waveform span:nth-child(4){height:32px;animation-delay:.3s;}
.waveform span:nth-child(5){height:20px;animation-delay:.4s;}
.waveform span:nth-child(6){height:28px;animation-delay:.5s;}
.waveform span:nth-child(7){height:14px;animation-delay:.6s;}
.waveform span:nth-child(8){height:22px;animation-delay:.7s;}
.waveform span:nth-child(9){height:18px;animation-delay:.8s;}
.waveform span:nth-child(10){height:10px;animation-delay:.9s;}
@keyframes wave{0%,100%{transform:scaleY(1);}50%{transform:scaleY(.4);}}
.waveform.paused span{animation-play-state:paused;}

.listen-btn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  background:var(--primary);
  color:#fff;
  padding:10px;
  border-radius:10px;
  font-size:13px;font-weight:700;
  cursor:pointer;
  transition:all .2s;
}
.listen-btn:hover{background:var(--primary2);box-shadow:var(--glow); transform: translateY(-2px);}
.listen-btn svg{width:14px;height:14px;}

/* Schedule card */
.schedule-card{
  background:var(--card);
  border-radius:var(--radius);
  padding:16px;
  flex:1;
  box-shadow: var(--shadow-soft);
}
.schedule-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:14px;
}
.schedule-title{font-size:13px;font-weight:700;}
.see-all{font-size:12px;color:var(--primary);cursor:pointer;font-weight:600;}
.schedule-item{
  display:flex;align-items:center;gap:10px;
  padding:8px 0;
  border-bottom:1px solid rgba(255,255,255,0.03);
}
[data-theme="light"] .schedule-item { border-bottom-color: rgba(0,0,0,0.03); }
.schedule-item:last-child{border-bottom:none;}
.sch-time{font-size:11px;color:var(--text2);min-width:52px;}
.sch-thumb{
  width:34px;height:34px;border-radius:7px;
  background:linear-gradient(135deg,var(--primary),#7c3aed);
  display:flex;align-items:center;justify-content:center;
  font-size:9px;font-weight:800;color:#fff;
  letter-spacing:.3px;text-align:center;line-height:1.2;
  flex-shrink:0;
}
.sch-info{flex:1;min-width:0;}
.sch-name{font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sch-desc{font-size:11px;color:var(--text2);}
.sch-live{
  font-size:10px;font-weight:700;
  color:var(--primary);
  background:rgba(255,0,127,.1);
  padding:2px 7px;border-radius:5px;
  flex-shrink:0;
}

/* News section */
.section-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:16px;
}
.section-title{font-size:15px;font-weight:700;letter-spacing:.3px;}
/* ── Categorías — scroll horizontal con flechas ── */
.cat-tabs-wrap{
  position:relative;
  margin-bottom:18px;
}
/* Gradientes de fade en los bordes */
.cat-tabs-wrap::before,
.cat-tabs-wrap::after{
  content:'';
  position:absolute;top:0;bottom:0;width:32px;
  pointer-events:none;z-index:2;
}
.cat-tabs-wrap::before{
  left:0;
  background:linear-gradient(to right, var(--bg,#06070b), transparent);
}
.cat-tabs-wrap::after{
  right:0;
  background:linear-gradient(to left, var(--bg,#06070b), transparent);
}
/* Flechas */
.cat-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  z-index:3;
  width:30px;height:30px;border-radius:50%;
  background:var(--card);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--text2);
  box-shadow:0 2px 12px rgba(0,0,0,.35);
  transition:all .2s;
  flex-shrink:0;
}
.cat-arrow:hover{background:var(--card2);color:var(--primary);border-color:var(--primary);}
.cat-arrow.ca-left {left:-4px;}
.cat-arrow.ca-right{right:-4px;}
.cat-arrow svg{width:16px;height:16px;}
/* Pista de scroll */
.cat-tabs{
  display:flex;gap:8px;
  overflow-x:auto;
  scroll-behavior:smooth;
  padding:4px 2px 8px;
  /* Sin wrap: siempre en una sola línea */
  flex-wrap:nowrap;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.cat-tabs::-webkit-scrollbar{display:none;}
.cat-tab{
  flex-shrink:0;
  padding:7px 16px;
  background:var(--card2);
  border:1.5px solid var(--border);
  border-radius:20px;
  font-size:12.5px;font-weight:600;
  color:var(--text2);
  cursor:pointer;
  white-space:nowrap;
  transition:all .2s;
  user-select:none;
}
.cat-tab:hover{color:var(--text);border-color:rgba(255,255,255,.2);}
.cat-tab.active{
  background:var(--primary);
  border-color:var(--primary);
  color:#fff;
  box-shadow:0 4px 15px rgba(255,0,127,.3);
}

.news-list{display:flex;flex-direction:column;gap:14px;margin-bottom:28px;}
.news-item{
  display:flex;gap:14px;
  background:var(--card);
  border-radius:12px;
  padding:14px;
  cursor:pointer;
  transition:all .2s;
  box-shadow: 0 2px 10px rgba(0,0,0,0.02);
}
.news-item:hover{transform: translateY(-2px); box-shadow: var(--shadow-soft);}
.news-thumb{
  width:90px;height:66px;
  border-radius:8px;
  background:var(--card2);
  overflow:hidden;
  flex-shrink:0;
  object-fit:cover;
}
.news-body{flex:1;min-width:0;}
.news-cat{
  font-size:10px;font-weight:700;
  letter-spacing:1px;text-transform:uppercase;
  color:var(--primary);
  margin-bottom:5px;
}
.news-cat.social{color:#10b981;}
.news-title{font-size:14px;font-weight:700;line-height:1.4;margin-bottom:5px;}
.news-time{font-size:11px;color:var(--text2);}

/* ===== PROGRAMAS DESTACADOS ===== */
.programs-grid{
  display:flex;
  gap:12px;
  overflow-x:auto;
  padding-bottom:6px;
  margin-bottom:4px;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.programs-grid::-webkit-scrollbar{display:none;}

.prog-card{
  flex-shrink:0;
  width:160px;
  border-radius:14px;
  overflow:hidden;
  cursor:pointer;
  background:var(--card2);
  transition:transform .2s,box-shadow .2s;
  text-decoration:none;
  color:var(--text);
}
.prog-card:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 28px rgba(0,0,0,.5);
}

/* Thumbnail: contenedor puramente posicionado.
   NO usa display:flex para que position:absolute
   del img y del texto no entren en conflicto.  */
.prog-thumb{
  width:100%;
  height:110px;
  position:relative;   /* contexto de posicionamiento */
  overflow:hidden;
  /* Color de fondo por defecto (sobrescrito por .pc-*) */
  background:linear-gradient(135deg,#1a1a2e,#16213e);
}

/* Imagen de portada: cubre todo el contenedor */
.prog-thumb img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  opacity:.9;
}

/* Nombre del programa: centrado, sobre cualquier imagen */
.prog-thumb-label{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px;
  z-index:1;
  /* Overlay oscuro para legibilidad sobre imagen */
  background:rgba(0,0,0,.25);
  font-family:'Barlow Condensed',sans-serif;
  font-size:14px;
  font-weight:900;
  color:#fff;
  text-align:center;
  line-height:1.2;
  letter-spacing:.5px;
  text-shadow:0 1px 8px rgba(0,0,0,.8);
  text-transform:uppercase;
  word-break:break-word;
}

/* Badge EN VIVO */
.prog-live{
  position:absolute;
  top:7px;
  left:7px;
  z-index:2;
  background:var(--primary);
  font-size:9px;
  font-weight:800;
  color:#fff;
  padding:2px 7px;
  border-radius:5px;
  letter-spacing:.8px;
  text-transform:uppercase;
}

.prog-info{padding:8px 10px 10px;}
.prog-name{
  font-size:12.5px;
  font-weight:700;
  line-height:1.35;
  margin-bottom:1px;
}
.prog-time{font-size:11px;color:var(--text2);}

/* ── Colores de tarjetas (una sola definición) ── */
.pc-default   {background:linear-gradient(135deg,#1a1a2e,#16213e);}
.pc-tarde     {background:linear-gradient(135deg,#2d0050,#7c00c8);}
.pc-manana    {background:linear-gradient(135deg,#003d2d,#00803a);}
.pc-hits      {background:linear-gradient(135deg,#3d2000,#a05a00);}
.pc-enlace    {background:linear-gradient(135deg,#001a3d,#003d99);}
.pc-conexion  {background:linear-gradient(135deg,#1a001a,#660066);}
.pc-deportes  {background:linear-gradient(135deg,#1a0000,#8b0000);}
.pc-finde     {background:linear-gradient(135deg,#001a00,#006600);}
.pc-noche     {background:linear-gradient(135deg,#1a0a00,#4d2200);}
.pc-despertando{background:linear-gradient(135deg,#002d1a,#006b4d);}

/* ===== PROGRAMACIÓN ===== */
.day-selector{
  display:flex;gap:8px;
  overflow-x:auto;
  padding-bottom:4px;
  scrollbar-width:none;
  margin-bottom:20px;
}
.day-selector::-webkit-scrollbar{display:none;}
.day-btn{
  flex-shrink:0;
  display:flex;flex-direction:column;align-items:center;
  padding:10px 14px;
  background:var(--card2);
  border-radius:12px;
  cursor:pointer;
  transition:all .2s;
  min-width:60px;
}
.day-btn:hover{background:var(--card);}
.day-btn.active{background:var(--primary);box-shadow: 0 4px 15px rgba(255,0,127,0.3);}
.day-btn .day-label{font-size:11px;color:rgba(255,255,255,.7);}
.day-btn.active .day-label{color:rgba(255,255,255,.8);}
.day-btn .day-num{
  font-family:'Barlow Condensed',sans-serif;
  font-size:22px;font-weight:900;
  line-height:1;
}
.day-btn:not(.active) .day-label{color:var(--text2);}

.prog-filters{display:flex;gap:10px;margin-bottom:20px;flex-wrap:wrap;}
.prog-filter-select{
  background:var(--card2);
  border:none;
  color:var(--text);
  padding:10px 16px;
  border-radius:12px;
  font-size:13px;
  outline:none;
  cursor:pointer;
}

.schedule-list{display:flex;flex-direction:column;gap:10px;}
.schedule-row{
  display:flex;align-items:center;gap:16px;
  background:var(--card);
  border-radius:12px;
  padding:14px 16px;
  cursor:pointer;
  transition:all .2s;
  position:relative;
}
.schedule-row:hover{transform: translateX(4px); box-shadow: var(--shadow-soft);}
.schedule-row.live{border-left:3px solid var(--primary);}
.sched-time{
  font-size:12px;color:var(--text2);
  min-width:110px;font-weight:500;
}
.sched-thumb{
  width:52px;height:52px;
  border-radius:10px;
  background:linear-gradient(135deg,#1a0030,#3d0073);
  display:flex;align-items:center;justify-content:center;
  font-family:'Barlow Condensed',sans-serif;
  font-size:10px;font-weight:800;color:#fff;
  text-align:center;line-height:1.2;
  letter-spacing:.3px;
  flex-shrink:0;
  padding:4px;
}
.sched-info{flex:1;}
.sched-name{font-size:15px;font-weight:700;}
.sched-desc{font-size:12px;color:var(--text2);margin-top:2px;}
.sched-live-badge{
  font-size:10px;font-weight:700;
  color:#fff;background:var(--primary);
  padding:3px 9px;border-radius:6px;
  letter-spacing:.8px;
}

/* ===== EVENTOS ===== */
.filter-tabs{display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap;}
.filter-tab{
  padding:7px 18px;
  background:var(--card2);
  border-radius:20px;
  font-size:13px;font-weight:600;
  color:var(--text2);
  cursor:pointer;
  transition:all .2s;
}
.filter-tab.active{background:var(--primary);color:#fff;box-shadow: 0 4px 15px rgba(255,0,127,0.3);}

.events-list{display:flex;flex-direction:column;gap:12px;}
.event-card{
  display:flex;gap:14px;
  background:var(--card);
  border-radius:14px;
  padding:14px;
  cursor:pointer;
  transition:all .2s;
}
.event-card:hover{transform: translateY(-2px); box-shadow: var(--shadow-soft);}
.event-thumb{
  width:80px;height:80px;
  border-radius:10px;
  background:linear-gradient(135deg,#1a0030,#3d0073);
  display:flex;align-items:center;justify-content:center;
  font-family:'Barlow Condensed',sans-serif;
  font-size:11px;font-weight:800;color:#fff;
  text-align:center;line-height:1.2;
  flex-shrink:0;padding:6px;
  letter-spacing:.3px;
  position:relative;
}
.ev-live{
  position:absolute;top:5px;left:5px;
  background:var(--primary);
  font-size:8px;font-weight:700;
  color:#fff;padding:2px 5px;
  border-radius:4px;letter-spacing:.8px;
}
.event-info{flex:1;}
.event-name{font-size:16px;font-weight:700;margin-bottom:4px;}
.event-desc{font-size:12px;color:var(--text2);margin-bottom:8px;}
.event-meta{display:flex;flex-direction:column;gap:3px;}
.event-meta-item{
  display:flex;align-items:center;gap:6px;
  font-size:12px;color:var(--text2);
}
.event-meta-item svg{width:12px;height:12px;color:var(--primary);}
.load-more{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:13px;
  background:var(--card);
  border-radius:12px;
  color:var(--text2);
  font-size:13.5px;font-weight:600;
  cursor:pointer;
  margin-top:10px;
  transition:all .2s;
}
.load-more:hover{color:var(--primary); background: var(--card2);}

/* ===== ARTISTAS / LOCUTORES ===== */
.search-bar{
  position:relative;
  margin-bottom:18px;
}
.search-bar input{
  width:100%;
  background:var(--card2);
  border:none;
  border-radius:12px;
  padding:12px 16px 12px 42px;
  color:var(--text);
  font-size:14px;outline:none;
  transition:background .2s;
}
.search-bar input::placeholder{color:var(--text2);}
.search-bar input:focus{background:var(--card);}
.search-bar svg{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  width:17px;height:17px;color:var(--text2);
}

.artist-list,.locutor-list{display:flex;flex-direction:column;gap:6px;}
.artist-item,.locutor-item{
  display:flex;align-items:center;gap:14px;
  padding:13px 14px;
  background:var(--card);
  border-radius:12px;
  cursor:pointer;
  transition:all .2s;
}
.artist-item:hover,.locutor-item:hover{transform: translateX(4px); background: var(--card2);}
.artist-avatar,.locutor-avatar{
  width:48px;height:48px;border-radius:50%;
  background:linear-gradient(135deg,var(--primary),#7c3aed);
  display:flex;align-items:center;justify-content:center;
  font-size:18px;font-weight:700;color:#fff;
  flex-shrink:0;overflow:hidden;
  border:2px solid rgba(255,0,127,.2);
}
.artist-avatar img,.locutor-avatar img{width:100%;height:100%;object-fit:cover;}
.artist-info,.locutor-info{flex:1;}
.artist-name,.locutor-name{font-size:15px;font-weight:700;}
.artist-genre,.locutor-role{font-size:12px;color:var(--text2);margin-top:2px;}
.item-arrow{color:var(--primary);}
.item-arrow svg{width:16px;height:16px;}

/* ===== MENSAJES ===== */
.msg-tabs{display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap;}
.msg-tab{
  padding:7px 16px;
  background:var(--card2);
  border-radius:20px;
  font-size:13px;font-weight:600;
  color:var(--text2);
  cursor:pointer;
  transition:all .2s;
}
.msg-tab.active{background:var(--primary);color:#fff;box-shadow: 0 4px 15px rgba(255,0,127,0.3);}

.messages-list{display:flex;flex-direction:column;gap:8px;}
.msg-item{
  display:flex;align-items:center;gap:13px;
  padding:13px 14px;
  background:var(--card);
  border-radius:12px;
  cursor:pointer;
  transition:all .2s;
}
.msg-item:hover{transform: translateY(-2px); box-shadow: var(--shadow-soft);}
.msg-avatar{
  width:44px;height:44px;border-radius:50%;
  background:var(--card2);
  display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:700;color:#fff;
  flex-shrink:0;overflow:hidden;
}
.msg-body{flex:1;min-width:0;}
.msg-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:3px;}
.msg-name{font-size:14px;font-weight:700;}
.msg-time{font-size:11px;color:var(--text2);}
.msg-text{font-size:12.5px;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.msg-dot{
  width:9px;height:9px;
  background:var(--primary);
  border-radius:50%;
  flex-shrink:0;
}

/* PODCASTS, VIDEOS... */
#page-podcasts p, #page-videos p, #page-config p, #page-ayuda p { color:var(--text2); font-size:14px; }

/* ===== MINI PLAYER — BASE (siempre presente en desktop, oculto en móvil) ===== */
.mini-player{
  position:fixed;
  bottom:0;
  left:var(--sidebar-w);
  right:0;
  height:var(--player-h);
  background:var(--sidebar);
  border-top:1px solid var(--border);
  display:flex;
  align-items:center;
  padding:0 20px;
  gap:16px;
  z-index:200;
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  transition:left .3s, background .3s;
  box-shadow: 0 -4px 24px rgba(0,0,0,.35);
}
.mini-player-play{
  width:46px;height:46px;
  background:var(--primary);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  flex-shrink:0;
  transition:all .2s;
  box-shadow:var(--glow);
}
.mini-player-play:hover{background:var(--primary2);transform:scale(1.06);}
.mini-player-play svg{width:20px;height:20px;color:#fff;}
.mini-player-info{flex:1;min-width:0;}
.mini-live{display:flex;align-items:center;gap:6px;font-size:10px;font-weight:700;color:var(--primary);letter-spacing:1px;margin-bottom:2px;}
.mini-live span{width:6px;height:6px;background:var(--primary);border-radius:50%;animation:pulse-dot 1.2s infinite;}
.mini-title{font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mini-sub{font-size:11px;color:var(--text2);}
.mini-wave{display:flex;align-items:center;gap:2px;flex-shrink:0;}
.mini-wave span{
  display:block;width:3px;
  background:var(--primary);border-radius:3px;
  animation:wave 1s ease-in-out infinite;
}
.mini-wave span:nth-child(1){height:6px;animation-delay:0s;}
.mini-wave span:nth-child(2){height:12px;animation-delay:.1s;}
.mini-wave span:nth-child(3){height:18px;animation-delay:.2s;}
.mini-wave span:nth-child(4){height:24px;animation-delay:.15s;}
.mini-wave span:nth-child(5){height:14px;animation-delay:.25s;}
.mini-wave span:nth-child(6){height:20px;animation-delay:.3s;}
.mini-wave span:nth-child(7){height:8px;animation-delay:.35s;}
.mini-wave.paused span{animation-play-state:paused;}
.mini-mode-btns{display:flex;gap:6px;flex-shrink:0;}
.mode-btn{
  padding:6px 14px;
  border-radius:8px;
  font-size:12px;font-weight:700;
  cursor:pointer;
  border:2px solid var(--border);
  color:var(--text2);
  transition:all .2s;
  background:transparent;
}
.mode-btn.active{border-color:var(--primary);color:var(--primary);background:rgba(255,0,127,.08);}
.mode-btn:hover:not(.active){background:var(--card2);}


@media(min-width: 901px) {
  /* Ocultar Scrollbars globalmente de forma automática */
  ::-webkit-scrollbar { display: none; }
  * { scrollbar-width: none; -ms-overflow-style: none; }

  body {
    overflow: hidden; /* Previene scroll general, lo manejan los contenedores interiores */
    background: var(--bg);
  }

  .app-wrapper {
    display: flex;
    height: 100vh;
    padding: 20px;
    gap: 24px;
    box-sizing: border-box;
  }

  /* SIDEBAR IZQUIERDO FLOTANTE */
  .sidebar {
    position: relative !important;
    transform: none !important;
    width: 240px;
    height: 100% !important;
    border-radius: var(--radius);
    box-shadow: 0 8px 30px rgba(0,0,0,0.2);
    overflow-y: auto;
  }
  
  /* CONTENIDO CENTRAL (Scroll independiente) */
  .main {
    position: relative;
    margin-left: 0 !important;
    flex: 1;
    height: 100%;
    overflow-y: auto;
    border-radius: var(--radius);
    padding-bottom: 120px !important; /* Espacio para el mini player flotante */
  }

  /* SIDEBAR DERECHO (Scroll Independiente y Constante) */
  .right-panel {
    display: flex !important; /* Forza visible siempre en PC */
    width: 340px;
    height: 100%;
    overflow-y: auto;
    flex-direction: column;
    gap: 16px;
    padding-bottom: 24px;
  }

  /* TOPBAR FLOTANTE */
  .topbar {
    position: sticky;
    top: 0;
    margin-bottom: 20px;
    border-radius: var(--radius);
  }
  /* Ocultar topbar móvil en escritorio */
  .mobile-topbar { display: none !important; }

  /* ── FLECHAS DE SLIDER (solo escritorio) ── */
  .slider-outer {
    position: relative;
    margin-bottom: 28px;
  }
  .slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 34px; height: 34px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    color: var(--text2);
    transition: all .2s;
    box-shadow: 0 4px 16px rgba(0,0,0,.35);
    opacity: 0;
    pointer-events: none;
  }
  .slider-outer:hover .slider-arrow { opacity: 1; pointer-events: all; }
  .slider-arrow:hover { color: var(--primary); border-color: var(--primary); background: var(--card2); transform: translateY(-50%) scale(1.08); }
  .slider-arrow.s-left  { left: -14px; }
  .slider-arrow.s-right { right: -14px; }
  .slider-arrow svg { width: 18px; height: 18px; }

  /* MINI PLAYER FLOTANTE ALINEADO EXACTAMENTE AL CENTRO */
  .mini-player {
    position: fixed;
    bottom: 20px !important;
    /* 20px (padding body) + 240px (sidebar-w) + 24px (gap) = 284px */
    left: calc(20px + 240px + 24px) !important;
    /* 20px (padding body) + 340px (right-panel-w) + 24px (gap) = 384px */
    right: calc(20px + 340px + 24px) !important;
    border-radius: var(--radius);
    border: 1px solid rgba(255,255,255,0.05);
    box-shadow: 0 10px 40px rgba(0,0,0,.3);
  }
}

/* MINI PLAYER - CONTROL DE VOLUMEN INTELIGENTE (Escritorio) */
.mini-player-vol {
  display: flex;
  align-items: center;
  margin-left: auto; /* Empuja el control hacia la derecha antes de los botones de modo */
  padding-left: 16px;
  padding-right: 16px;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  height: 40px;
}
.vol-slider-wrap {
  width: 0;
  opacity: 0;
  overflow: hidden;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, padding 0.3s ease;
  display: flex;
  align-items: center;
}
.mini-player-vol:hover .vol-slider-wrap {
  width: 80px; /* Aparece fluidamente en Hover */
  opacity: 1;
  padding-left: 10px;
}
.vol-slider {
  width: 100%;
  cursor: pointer;
  height: 4px;
  border-radius: 2px;
  background: rgba(255,255,255,0.2);
  appearance: none;
  -webkit-appearance: none;
  outline: none;
}
.vol-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 10px var(--primary);
}
.vol-icon {
  color: var(--text2);
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: color 0.2s;
}
.mini-player-vol:hover .vol-icon { color: var(--text); }
@media(max-width: 900px) {
  .mini-player-vol { display: none; } /* Totalmente oculto en móviles */
}

/* MOBILE TOP BAR */
.mobile-topbar{
  display:none;
  position:sticky;top:0;z-index:90;
  align-items:center;justify-content:space-between;
  padding:12px 16px;
  background:var(--sidebar);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  box-shadow:var(--shadow-soft);
  border-bottom:1px solid var(--border);
}
[data-theme="light"] .mobile-topbar{background:rgba(255,255,255,.97);}
.mobile-topbar .logo-text{font-size:24px;}
.mob-topbar-actions{display:flex;gap:8px;align-items:center;}

/* ===== MOBILE NAV (MENU INFERIOR MEJORADO) ===== */
.mobile-nav{
  display:none;
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  height:65px;
  padding-bottom:0;
  background:#0c0d12;
  z-index:300;
  box-shadow:0 -2px 20px rgba(0,0,0,.45);
  overflow:hidden;
}

[data-theme="light"] .mobile-nav{
  background:#ffffff;
}

.mobile-nav-inner{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-around;
  padding:0 4px;
}

.mob-nav-btn{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 4px;
  color:var(--text2);
  font-size: 10.5px; 
  font-weight:600;
  cursor:pointer;
  height: 100%;
  transition: color .2s, transform .2s;
  overflow: hidden;
  text-align: center;
}
.mob-nav-btn svg{
  width: 22px;
  height: 22px;
  flex-shrink: 0; 
  margin-bottom: 2px;
}
.mob-nav-btn.active{color:var(--primary);}
.mob-nav-btn:active{transform:scale(0.95);}

/* ===== MOBILE PLAYER MEJORADO ===== */
.mobile-player{
  display:none;
  position:fixed;
  left:0;
  right:0;
  bottom:65px;
  background:var(--sidebar);
  padding:10px 14px;
  z-index:250;
  flex-direction:row;
  align-items:center;
  gap:12px;
  box-shadow: var(--shadow-nav);
}
.mob-play-btn{
  width:44px;height:44px;
  background:var(--primary);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  flex-shrink:0;
  box-shadow:var(--glow);
  transition: transform .2s;
}
.mob-play-btn:active{transform:scale(0.95);}
.mob-play-btn svg{width:18px;height:18px;color:#fff;}
.mob-player-info{flex:1;min-width:0;}
.mob-player-live{font-size:9px;font-weight:700;color:var(--primary);letter-spacing:1px;margin-bottom:1px;}
.mob-player-title{font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mob-player-sub{font-size:11px;color:var(--text2);}
.mob-player-wave{display:flex;align-items:center;gap:2px;}
.mob-player-wave span{
  display:block;width:3px;
  background:var(--primary);border-radius:3px;
  animation:wave 1s ease-in-out infinite;
}
.mob-player-wave span:nth-child(1){height:6px;animation-delay:0s;}
.mob-player-wave span:nth-child(2){height:14px;animation-delay:.1s;}
.mob-player-wave span:nth-child(3){height:22px;animation-delay:.2s;}
.mob-player-wave span:nth-child(4){height:16px;animation-delay:.3s;}
.mob-player-wave span:nth-child(5){height:10px;animation-delay:.4s;}
.mob-player-wave.paused span{animation-play-state:paused;}


/* ===== RESPONSIVE MEDIA QUERIES ===== */
@media(max-width:900px){

  /* ── CRÍTICO: app-wrapper en columna para móvil ── */
  .app-wrapper{
    flex-direction:column !important;
    height:auto !important;
    padding:0 !important;
    gap:0 !important;
    min-height:100dvh;
  }

  /* Main ocupa todo el ancho */
  .main{
    width:100% !important;
    flex:1 !important;
    overflow-y:visible !important;
    height:auto !important;
    border-radius:0 !important;
    margin-left:0 !important;
    padding-bottom:150px !important;
  }

  .mini-player{display:none !important;}
  .topbar{display:none;}
  .mobile-topbar{display:flex !important;}
  .mobile-nav{display:flex !important;}
  .mobile-player{display:flex !important;}
  .page{padding:12px 14px !important;}
  .right-panel{display:none !important;}
  .slider-arrow{display:none !important;}
  .slider-outer{margin-bottom:0 !important;}
}


@media(max-width:480px){
  .prog-card{width:140px;}
  .prog-thumb{height:88px;}
  .news-thumb{width:74px;height:56px;}
  .page{padding:10px 12px !important;}
}

/* =========================================================
   SIDEBAR MOBILE FULLSCREEN FIX (Intacto para Móviles)
========================================================= */
@media(max-width:900px){

  .sidebar{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100dvh;
    background:var(--bg);
    z-index:999;
    transform:translateX(-100%);
    transition:transform .35s ease;
    overflow-y:auto;
    padding-bottom:140px;
    display:flex;
    flex-direction:column;
    box-shadow: none;
    border-radius: 0;
  }

  .sidebar.open-mobile{
    transform:translateX(0);
  }
  
  .close-sidebar-btn {
    display: flex;
    position: absolute;
    top: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--card2);
    color: var(--text2);
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1000;
    transition: all .2s;
  }
  
  .close-sidebar-btn:hover {
    color: var(--primary);
    background: var(--card);
  }
  
  .close-sidebar-btn svg {
    width: 24px;
    height: 24px;
  }

  .sidebar-overlay{
    z-index:998;
  }

  /* LOGO AREA */
  .sidebar-logo{
    padding:28px 24px 10px;
    display:flex;
    justify-content:center;
    align-items:center;
  }

  .sidebar-logo img{
    width:220px;
    max-width:80%;
    height:auto;
    object-fit:contain;
  }

  /* MENU */
  .sidebar-nav{
    padding:20px;
    display:flex;
    flex-direction:column;
    gap:14px;
  }

  .nav-item{
    border:none !important;
    background:var(--card);
    border-radius:18px;
    min-height:64px;
    padding:0 20px;
    display:flex;
    align-items:center;
    gap:16px;
    font-size:18px;
    font-weight:700;
    color:var(--text);
    box-shadow:
      0 0 0 1px rgba(255,0,127,.15),
      0 8px 25px rgba(0,0,0,.25);
    transition:all .25s ease;
  }

  .nav-item svg{
    width:24px;
    height:24px;
    color:var(--primary);
    flex-shrink:0;
  }

  .nav-item.active{
    background:linear-gradient(
      135deg,
      rgba(255,0,127,.18),
      rgba(255,0,127,.08)
    );
    color:#fff;
    box-shadow:
      0 0 0 1px rgba(255,0,127,.4),
      0 10px 30px rgba(255,0,127,.18);
  }

  .nav-item::after{
    content:'›';
    margin-left:auto;
    font-size:28px;
    font-weight:300;
    color:var(--primary);
  }

  .sidebar-bottom {
    display: none !important;
  }

}

/* ===== PROGRAM COLORS — definidas arriba en "PROGRAMAS DESTACADOS" ===== */

/* AVATAR COLORS */
.av-1{background:linear-gradient(135deg,#ff007f,#ff5c00);}
.av-2{background:linear-gradient(135deg,#ff5c00,#ffb300);}
.av-3{background:linear-gradient(135deg,#00b4d8,#0077b6);}
.av-4{background:linear-gradient(135deg,#7c3aed,#5b21b6);}
.av-5{background:linear-gradient(135deg,#10b981,#047857);}
.av-6{background:linear-gradient(135deg,#f59e0b,#d97706);}
.av-7{background:linear-gradient(135deg,#ef4444,#b91c1c);}
.av-8{background:linear-gradient(135deg,#8b5cf6,#7c3aed);}

/* SIDEBAR OVERLAY MOBILE */
.sidebar-overlay{
  display:none;
  position:fixed;inset:0;
  background:rgba(0,0,0,.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index:99;
}
.sidebar-overlay.open{display:block;}

/* Toast Notification (Modern Share Alert) */
.toast-share {
  position: fixed;
  bottom: calc(var(--nav-base-h) + var(--player-h) + var(--safe-bottom) + 20px);
  left: 50%;
  transform: translateX(-50%) translateY(50px);
  background: var(--primary);
  color: #fff;
  padding: 12px 24px;
  border-radius: 30px;
  font-size: 14px;
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  z-index: 9999;
  box-shadow: 0 10px 30px rgba(255,0,127,0.4);
  display: flex;
  align-items: center;
  gap: 8px;
}
.toast-share.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}
.toast-share svg { width: 18px; height: 18px; }

@media(max-width: 900px){
  html, body{
    overflow-x:hidden;
    background:var(--bg);
  }
}
/* ── Botón crear publicación móvil ── */
.mob-create-btn {
  background: var(--primary) !important;
  border-radius: 50% !important;
  width: 32px !important;
  height: 32px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff !important;
  text-decoration: none;
  flex-shrink: 0;
  transition: background .2s, transform .15s;
}
.mob-create-btn:hover { background: var(--primary2, #cc0066) !important; transform: scale(1.08); }