:root{
  /* Variables para las 2 capas del gradiente (A y B) */
  --a1:#0f3f7a;
  --a2:#1f6fb2;
  --b1:#0f3f7a;
  --b2:#1f6fb2;

  --ink:#ffffff;
  --muted:rgba(255,255,255,.78);
  --muted2:rgba(255,255,255,.55);

  --card:rgba(4, 26, 58, .55);
  --card2:rgba(4, 26, 58, .40);
  --stroke:rgba(255,255,255,.12);

  --live:#00f5d4;
  --next:#ffd166;
  --hot:#ff4dff;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family:"Archivo Narrow", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink);
  background:#0f3f7a; /* fallback por si JS tarda */
  overflow-x:hidden;
}

/* Fondo con patrones y crossfade */
.bg{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
}

/* Capas de gradiente con crossfade suave */
.bg__tone{
  position:absolute;
  inset:0;
  opacity:1;
  transition: opacity 1400ms ease;
  will-change: opacity;
}
.bg__tone--a{ opacity:1; }
.bg__tone--b{ opacity:0; }

/* Gradientes: mezcla + luz suave */
.bg__tone--a{
  background:
    radial-gradient(1200px 800px at 20% 20%, rgba(255,255,255,.10), transparent 60%),
    linear-gradient(135deg, var(--a1), var(--a2));
}
.bg__tone--b{
  background:
    radial-gradient(1200px 800px at 20% 20%, rgba(255,255,255,.10), transparent 60%),
    linear-gradient(135deg, var(--b1), var(--b2));
}

/* Patrones */
.bg__grid{
  position:absolute;
  inset:0;
  opacity:.10;
  background:
    linear-gradient(90deg, rgba(255,255,255,.18) 1px, transparent 1px) 0 0/90px 90px,
    linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px) 0 0/90px 90px;
}
.bg__dots{
  position:absolute;
  right:-120px;
  top:120px;
  width:520px;
  height:520px;
  opacity:.45;
  background:
    radial-gradient(circle at 12px 12px, rgba(0,245,212,.85) 0 7px, transparent 8px) 0 0/34px 34px;
  transform:rotate(12deg);
  filter: blur(.2px);
}
.bg__slashes{
  position:absolute;
  left:140px;
  top:130px;
  width:220px;
  height:220px;
  opacity:.85;
  background:
    repeating-linear-gradient(115deg, rgba(255,214,102,.95) 0 14px, transparent 14px 30px);
  clip-path: polygon(12% 0, 100% 0, 88% 100%, 0 100%);
  transform:rotate(6deg);
}

/* Topbar */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 22px;
}

.brand{
  display:flex;
  align-items:baseline;
  gap:10px;
  text-decoration:none;
  color:var(--ink);
}
.brand__dot{
  width:10px;height:10px;border-radius:50%;
  background:linear-gradient(135deg, var(--hot), var(--live));
  box-shadow:0 0 18px rgba(255,77,255,.35);
}
.brand__name{
  font-size:28px;
  font-weight:700;
  letter-spacing:.2px;
}
.brand__fm{
  font-size:14px;
  font-weight:600;
  opacity:.9;
}

.topnav{
  display:flex;
  align-items:center;
  gap:10px;
}
.iconlink{
  width:34px;height:34px;
  display:grid;place-items:center;
  border:1px solid var(--stroke);
  border-radius:999px;
  text-decoration:none;
  color:var(--ink);
  background:rgba(255,255,255,.06);
  backdrop-filter: blur(8px);
}
.icon{ font-size:14px; opacity:.9; }

.toplink{
  margin-left:8px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.08);
  color:var(--ink);
  text-decoration:none;
  font-weight:700;
}
.toplink.is-active{
  border-color: rgba(0,245,212,.55);
  box-shadow:0 0 0 2px rgba(0,245,212,.12) inset;
}

/* Layout */
.wrap{
  max-width:1100px;
  margin:0 auto;
  padding:10px 22px 42px;
}

.hero{
  padding:10px 0 14px;
}

/* Velo suave para mejorar lectura del H1 + bajada */
.hero__text{
  width: 100%;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(0,0,0,.30);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.08);
}


.hero h1{
  margin:0;
  font-size:46px;
  letter-spacing:.3px;
  text-shadow:
    0 2px 10px rgba(0,0,0,.35),
    0 1px 1px rgba(0,0,0,.35);
}

.muted{ color:var(--muted); }

.hero p{
  margin:8px 0 0;
  font-size:18px;
  text-shadow:
    0 2px 10px rgba(0,0,0,.28),
    0 1px 1px rgba(0,0,0,.28);
}

/* (Solo en hero) un poco más de contraste en el muted */
.hero .muted{
  color: rgba(255,255,255,.86);
}

.statusline{
  display:flex;
  gap:10px;
  margin-top:14px;
  flex-wrap:wrap;
}
.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.07);
  font-weight:700;
  text-shadow: 0 1px 1px rgba(0,0,0,.25);
}
.pill--soft{
  color:var(--muted);
  font-weight:600;
}

/* Now/Next cards */
.now-next{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
  margin-top:14px;
}
.card{
  border:1px solid var(--stroke);
  background:linear-gradient(180deg, var(--card), var(--card2));
  border-radius:18px;
  overflow:hidden;
  backdrop-filter: blur(10px);
}
.card__head{
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px 14px 0;
}
.card__title{
  font-weight:800;
  letter-spacing:.3px;
  opacity:.95;
}
.badge{
  font-size:12px;
  font-weight:900;
  letter-spacing:.8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--stroke);
  text-shadow: 0 1px 1px rgba(0,0,0,.25);
}
.badge--live{ border-color: rgba(0,245,212,.55); color:var(--live); }
.badge--next{ border-color: rgba(255,209,102,.55); color:var(--next); }

.card__body{
  padding:12px 14px 16px;
}

.program{
  display:flex;
  gap:12px;
  align-items:center;
}
.program__img{
  width:62px;
  height:62px;
  border-radius:14px;
  object-fit:cover;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.06);
  flex:0 0 auto;
}
.program__meta{
  min-width:0;
}
.program__name{
  font-size:20px;
  font-weight:900;
  line-height:1.05;
  text-shadow: 0 1px 1px rgba(0,0,0,.25);
}
.program__time{
  margin-top:4px;
  color:var(--muted);
  font-weight:700;
  text-shadow: 0 1px 1px rgba(0,0,0,.25);
}
.program__extra{
  margin-top:3px;
  color:var(--muted2);
  font-weight:600;
  font-size:14px;
}

/* Grilla */
.grid{
  margin-top:18px;
  border:1px solid var(--stroke);
  border-radius:18px;
  background: rgba(0,0,0,.30);;
  backdrop-filter: blur(10px);
  overflow:hidden;
}
.grid__head{
  padding:14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  border-bottom:1px solid var(--stroke);
}
.grid__head h2{
  margin:0;
  margin-bottom: 0.5rem;
  font-size:22px;
  letter-spacing:.2px;
  text-shadow: 0 1px 1px rgba(0,0,0,.25);
}

.tabs{
  display:flex;
  gap:15px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.tab{
  padding:8px 10px;
  border-radius:999px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.06);
  color:var(--ink);
  font-weight:800;
  cursor:pointer;
  text-shadow: 0 1px 1px rgba(0,0,0,.25);
}
.tab.is-active{
  border-color: rgba(255,214,102,.55);
  box-shadow:0 0 0 2px rgba(255,214,102,.12) inset;
}

.list{
  padding:10px 10px 12px;
}
.item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.10);
}
.item + .item{ margin-top:10px; }

.item__left{
  display:flex;
  gap:12px;
  align-items:center;
  min-width:0;
}
.item__img{
  width:48px;height:48px;border-radius:12px;object-fit:cover;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.06);
}
.item__txt{ min-width:0; }
.item__name{
  font-weight:900;
  font-size:18px;
  line-height:1.05;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  text-shadow: 0 1px 1px rgba(0,0,0,.25);
}
.item__sub{
  margin-top:4px;
  color:var(--muted);
  font-weight:700;
  font-size:14px;
  text-shadow: 0 1px 1px rgba(0,0,0,.25);
}

.item__right{
  display:flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
}
.tag{
  font-size:12px;
  font-weight:900;
  letter-spacing:.7px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--stroke);
  color:var(--muted);
  text-shadow: 0 1px 1px rgba(0,0,0,.25);
}
.tag--live{
  color:var(--live);
  border-color: rgba(0,245,212,.55);
}
.tag--next{
  color:var(--next);
  border-color: rgba(255,209,102,.55);
}

.note{
  padding:0 14px 14px;
  text-shadow: 0 1px 1px rgba(0,0,0,.25);
}

.skeleton{
  height:66px;
  border-radius:14px;
  background:linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,255,255,.14), rgba(255,255,255,.08));
  background-size:200% 100%;
  animation: shimmer 1.2s infinite linear;
}
@keyframes shimmer{
  0%{ background-position: 200% 0; }
  100%{ background-position: -200% 0; }
}

@media (max-width: 860px){
  .now-next{ grid-template-columns: 1fr; }
  .hero h1{ font-size:38px; }
}

@media (max-width: 640px){
  .grid__head{
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }

  .tabs{
    width: 100%;
    justify-content: center;
    overflow-x: auto;
    padding-bottom: 6px;
  }

  .tabs::-webkit-scrollbar{
    height: 4px;
  }

  .tabs::-webkit-scrollbar-thumb{
    background: rgba(255,255,255,.25);
    border-radius: 4px;
  }

  .tab{
    flex: 0 0 auto;
    white-space: nowrap;
  }
}