:root{
  --violet-dark:#21006A;
  --violet:#33007F;
  --lime:#86FF17;
  --white:#F4F1FF;
  --text-muted:#B7A6E0;
  --border-c:rgba(134,255,23,0.18);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--violet-dark);
  color:var(--white);
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
ul{list-style:none;margin:0;padding:0;}
button{font:inherit;color:inherit;}

/* ---------- page layout: sidebar + content ---------- */
.page{
  display:flex;
  min-height:100vh;
  border-top:1px solid var(--border-c);
}
.sidebar{
  width:440px;
  flex:0 0 440px;
  border-right:1px solid var(--border-c);
  display:flex;
  flex-direction:column;
  padding:28px 28px 0;
}
.content{
  flex:1;
  min-width:0;
  padding:28px 32px 48px;
  container-type:inline-size;
}

/* ---------- sidebar: logo ---------- */
.logo{display:block;padding-bottom:24px;border-bottom:1px solid var(--border-c);margin-bottom:0;}
.logo img{height:58px;width:auto;}

/* ---------- sidebar: menu row ---------- */
.menu-row{
  display:flex;align-items:center;gap:14px;
  width:100%;background:none;border:none;cursor:pointer;
  padding:18px 0;border-bottom:1px solid var(--border-c);
  color:var(--white);font-size:15px;text-align:left;
}
.menu-icon{display:flex;flex-direction:column;gap:4px;width:20px;}
.menu-icon i{display:block;height:2px;background:var(--white);border-radius:1px;}

/* ---------- sidebar: station blocks ---------- */
.station-block{padding:18px 0;border-bottom:1px solid var(--border-c);}
.station-name{
  font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-muted);margin:0 0 12px;
}
.station-row{display:flex;align-items:center;gap:14px;}
.play-circle{
  flex:0 0 44px;width:44px;height:44px;border-radius:50%;
  background:none;border:2.5px solid var(--lime);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.play-circle svg{width:16px;height:16px;fill:var(--lime);}
.play-circle svg[hidden]{display:none !important;}
.icon-loading{
  fill:none !important;stroke:var(--lime);
  animation:spin 0.9s linear infinite;
  transform-origin:center;
}
@keyframes spin{to{transform:rotate(360deg);}}
.station-info{display:flex;flex-direction:column;gap:2px;min-width:0;}
.station-time{font-size:15px;font-weight:700;color:var(--text-muted);}
.station-show{font-size:14px;color:var(--white);overflow-wrap:break-word;}
.station-status{font-size:11px;color:var(--lime);margin-top:2px;}
.station-status[hidden]{display:none;}

/* ---------- sidebar: popup button ---------- */
.popup-btn{
  display:flex;align-items:center;gap:10px;
  width:100%;margin:18px 0;padding:12px 14px;
  background:none;border:1px solid var(--border-c);border-radius:4px;
  color:var(--white);font-size:13px;cursor:pointer;
}
.popup-icon{width:18px;height:18px;fill:none;stroke:var(--white);stroke-width:1.4;flex-shrink:0;}

/* ---------- sidebar: bottom (social) ---------- */
.sidebar-bottom{margin-top:auto;padding:18px 0;}
.social-row{display:flex;gap:14px;}
.social-row img{height:20px;width:20px;filter:invert(89%) sepia(56%) saturate(1000%) hue-rotate(30deg);}

/* ---------- content: title ---------- */
.content-title{
  font-size:26px;font-weight:500;margin:0 0 20px;
  padding-bottom:20px;border-bottom:1px solid var(--border-c);
  text-transform:lowercase;color:var(--white);
}
.content-title.no-transform{text-transform:none;}

/* ---------- news grid ---------- */
.news-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}
@container (min-width:580px){
  .news-grid{grid-template-columns:repeat(2,1fr);}
}
@container (min-width:900px){
  .news-grid{grid-template-columns:repeat(3,1fr);}
}
.news-card{
  position:relative;
  border-radius:0;
  overflow:hidden;
  aspect-ratio:1/1;
  display:flex;align-items:flex-end;
  background-color:var(--violet-dark);
  background-size:cover;
  background-position:center;
}
.news-card.featured{
  grid-column:span 2;
  aspect-ratio:2.08/1;
}
.news-card::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.75) 100%);
}
.news-card .arrow{
  position:absolute;top:16px;right:16px;z-index:2;
  width:16px;height:16px;stroke:var(--lime);fill:none;stroke-width:2;
}
.news-card .news-body{position:relative;z-index:2;padding:20px;}
.news-card h3{
  font-size:20px;line-height:1.25;font-weight:700;color:var(--white);margin:0;
}
.news-card.featured h3{font-size:28px;}

.view-all{
  display:inline-block;margin-top:24px;color:var(--lime);
  font-size:13px;text-transform:lowercase;border-bottom:1px solid var(--lime);
}

/* ---------- offcanvas menu ---------- */
.offcanvas-menu{
  position:fixed;top:0;right:0;height:100vh;width:min(320px,85vw);
  background:var(--violet);
  transform:translateX(100%);
  transition:transform .3s ease;
  z-index:60;padding:24px;
}
.offcanvas-menu.open{transform:translateX(0);}
.menu-close{background:none;border:none;color:var(--lime);font-size:32px;cursor:pointer;line-height:1;margin-bottom:24px;}
.menu-links li{margin-bottom:18px;}
.menu-links a{font-size:20px;color:var(--white);text-transform:lowercase;}
.menu-links a.no-transform{text-transform:none;}
.menu-links a:hover{color:var(--lime);}
.menu-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.5);
  opacity:0;pointer-events:none;transition:opacity .3s ease;z-index:50;
}
.menu-overlay.open{opacity:1;pointer-events:auto;}

/* ---------- live video window ---------- */
.video-window{margin:24px auto;padding:0 24px;}
.video-window h2{color:var(--lime);font-size:16px;text-transform:lowercase;margin-bottom:12px;}
.video-frame{position:relative;padding-top:56.25%;border-radius:6px;overflow:hidden;}
.video-frame iframe{position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;border:none !important;max-width:none !important;max-height:none !important;}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .page{flex-direction:column;}
  .sidebar{width:100%;flex:none;border-right:none;border-bottom:1px solid var(--border-c);}
  .sidebar-bottom{margin-top:0;}
  .content{padding:24px 20px 40px;}
}

@media (max-width:520px){
  .logo img{height:44px;}
}

@media (min-width:901px) and (orientation:landscape){
  .sidebar{width:380px;flex:0 0 380px;}
}

/* ---------- calendar page: cuadrícula semanal (días x horas) ---------- */
.calendar-loading,.calendar-empty{color:var(--text-muted);font-size:14px;}

.week-grid-wrap{
  overflow-x:auto;border:1px solid var(--border-c);border-radius:8px;
  -webkit-overflow-scrolling:touch;
}
.week-grid{display:flex;width:100%;}

.week-hours-col{
  flex:0 0 46px;position:sticky;left:0;z-index:2;
  background:var(--violet-dark);border-right:1px solid var(--border-c);
}
.week-corner{height:40px;border-bottom:1px solid var(--border-c);}
.week-hour-label{
  height:48px;font-size:10px;color:var(--text-muted);
  text-align:right;padding-right:6px;box-sizing:border-box;
  transform:translateY(-6px);
}

.week-day-col{flex:1 1 120px;min-width:120px;border-right:1px solid var(--border-c);}
.week-day-col:last-child{border-right:none;}
.week-day-header{
  height:40px;display:flex;align-items:center;justify-content:center;gap:6px;
  font-size:12px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.03em;
  border-bottom:1px solid var(--border-c);
  position:sticky;top:0;background:var(--violet-dark);z-index:1;
}
.week-day-header span:last-child{font-size:13px;color:var(--white);font-weight:500;}
.week-day-header.is-today{color:var(--lime);}
.week-day-header.is-today span:last-child{color:var(--lime);}

.week-day-body{
  position:relative;
  background-image:repeating-linear-gradient(
    to bottom,
    rgba(206,236,1,0.06) 0, rgba(206,236,1,0.06) 1px,
    transparent 1px, transparent 48px
  );
}

.week-event{
  position:absolute;left:2px;right:2px;
  background:var(--violet);border:1px solid var(--border-c);border-radius:4px;
  overflow:hidden;cursor:default;
}
.week-event.is-live{border-color:var(--lime);}
.week-event-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.week-event-title{
  position:absolute;left:0;right:0;bottom:0;
  background:rgba(51,0,127,0.85);
  padding:2px 4px;font-size:10px;line-height:1.25;color:var(--white);
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
}

/* ---------- news (listado completo) ---------- */
.news-grid-full{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));}
.news-grid-full .news-card{aspect-ratio:1.2/1;}

/* ---------- contacts ---------- */
.contacts-card{
  max-width:520px;background:var(--violet);border:1px solid var(--border-c);
  border-radius:10px;padding:28px;
}
.contacts-list{margin:20px 0;padding:0;list-style:none;}
.contacts-list li{
  display:flex;justify-content:space-between;gap:16px;
  padding:12px 0;border-bottom:1px solid var(--border-c);font-size:14px;
}
.contacts-list li:last-child{border-bottom:none;}
.contacts-label{color:var(--text-muted);}
.contacts-list a{color:var(--lime);}
.contacts-note{font-size:12px;color:var(--text-muted);margin-top:16px;}

/* ---------- live tv ---------- */
.livetv-status{
  display:inline-block;font-size:13px;color:var(--text-muted);
  margin-bottom:16px;padding:6px 14px;border-radius:20px;border:1px solid var(--border-c);
}
.livetv-status.is-live{color:var(--violet-dark);background:var(--lime);border-color:var(--lime);font-weight:500;}
.livetv-frame{width:100%;position:relative;padding-top:56.25%;border-radius:8px;overflow:hidden;}
.livetv-frame iframe{position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;border:none !important;max-width:none !important;max-height:none !important;}

/* ---------- menu: enlace activo ---------- */
.menu-links a.active{color:var(--lime);}

/* ---------- news detail ---------- */
.news-detail{max-width:720px;}
.news-detail-img{width:100%;max-height:380px;object-fit:cover;border-radius:0;margin-bottom:20px;}
.news-detail-title{border-bottom:none;padding-bottom:0;margin-bottom:16px;}
.news-detail p{font-size:15px;line-height:1.7;color:var(--white);margin:0 0 16px;}

/* ---------- banner publicitario (home) ---------- */
.home-banner-link{display:block;margin-bottom:24px;}
.home-banner{
  width:100%;
  height:auto;
  display:block;
  border-radius:0;
}

/* ---------- control de volumen (compartido por los dos reproductores) ---------- */
.volume-block{padding:18px 0;border-bottom:1px solid var(--border-c);}
.volume-row{display:flex;align-items:center;gap:12px;}
.volume-mute-btn{
  flex:0 0 30px;width:30px;height:30px;border-radius:50%;
  background:var(--lime);border:none;cursor:pointer;padding:0;
  display:flex;align-items:center;justify-content:center;
}
.volume-mute-btn svg{width:16px;height:16px;fill:var(--violet-dark);color:var(--violet-dark);}
.volume-mute-btn svg[hidden]{display:none !important;}
.volume-slider{
  flex:1;-webkit-appearance:none;appearance:none;
  height:8px;border-radius:4px;background:var(--violet);
  outline:none;margin:0;cursor:pointer;
}
.volume-slider::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:16px;height:16px;border-radius:50%;background:var(--lime);
  cursor:pointer;border:none;
}
.volume-slider::-moz-range-thumb{
  width:16px;height:16px;border-radius:50%;background:var(--lime);
  cursor:pointer;border:none;
}
.volume-slider::-moz-range-track{background:var(--violet);height:8px;border-radius:4px;}
.volume-percent{font-size:13px;color:var(--lime);font-weight:500;min-width:34px;text-align:right;}

/* ---------- "ahora suena": logo por defecto o foto del programa ---------- */
/* Se usa tanto en la home (encima del player principal) como en el pop-up */
.popup-nowplaying{
  position:relative;
  background:var(--violet);border:1px solid var(--border-c);border-radius:0;
  overflow:hidden;margin-bottom:18px;
}
.popup-nowplaying-img{width:100%;aspect-ratio:1/1;display:block;background:var(--violet-dark);}
.popup-nowplaying-img.is-logo{object-fit:contain;padding:28px;box-sizing:border-box;}
.popup-nowplaying-img.is-photo{object-fit:cover;padding:0;}
.popup-nowplaying-body{
  position:absolute;left:0;right:0;bottom:0;
  background:rgba(51,0,127,0.7);
  padding:10px 14px;
}
.popup-nowplaying-time{font-size:12px;color:var(--text-muted);}
.popup-nowplaying-title{font-size:14px;color:var(--white);margin-top:2px;}

/* ---------- ajuste fino con el ancho REAL de la columna de contenido ---------- */
/* (no el de toda la ventana, así funciona igual de bien tenga la sidebar el ancho que tenga) */
@container (max-width:420px){
  .news-card.featured{aspect-ratio:1/1;}
}