/* =========================================================
   DONKA ESTEREO — Páginas de artista
   Distribución tipo Spotify con la identidad de la emisora.
   Archivo independiente: se enlaza desde cada página generada.
   ========================================================= */

:root{
  --color-primary:#D97706;
  --color-primary-dark:#B45309;
  --color-accent:#06B6D4;
  --color-accent-light:#22D3EE;
  --color-dark-bg:#0F1B2E;
  --color-dark-light:#1e3a5f;
  --color-surface:#16263f;
  --color-surface-2:#1b2f4d;
  --color-text-primary:#f1f5f9;
  --color-text-secondary:#cbd5e1;
  --color-text-muted:#94a3b8;
  --font-display:'Fraunces', Georgia, serif;
  --font-body:'Outfit', -apple-system, 'Segoe UI', sans-serif;
  --radius-sm:8px;
  --radius-md:14px;
  --radius-full:9999px;
  --player-height:88px;
  --line:rgba(255,255,255,0.08);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--color-dark-bg);
  color:var(--color-text-primary);
  font-family:var(--font-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  /* espacio para que la barra fija no tape el contenido */
  padding-bottom:calc(var(--player-height) + 1rem);
}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}

.wrap{max-width:1000px;margin:0 auto;padding:0 clamp(1rem,4vw,2rem);}

/* ---------- Barra superior ---------- */
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:clamp(0.8rem,2vw,1.2rem) clamp(1rem,4vw,2rem);
  border-bottom:1px solid var(--line);
  position:relative;z-index:5;
}
.topbar .marca{display:flex;align-items:center;gap:0.7rem;}
.topbar .marca img{width:clamp(34px,5vw,44px);height:auto;border-radius:50%;}
.topbar .marca span{font-family:var(--font-display);font-weight:900;font-size:clamp(0.95rem,2vw,1.15rem);}
.topbar .volver{
  font-size:0.9rem;color:var(--color-accent-light);
  border:1px solid rgba(6,182,212,0.35);border-radius:var(--radius-full);
  padding:0.45rem 1.1rem;transition:all .25s ease;white-space:nowrap;
}
.topbar .volver:hover{background:rgba(6,182,212,0.12);}

/* ---------- Cabecera del artista (estilo Spotify) ---------- */
.hero{
  display:flex;width:100%;align-items:flex-end;gap:clamp(1.2rem,4vw,2.5rem);
  padding:clamp(1.8rem,6vw,3.5rem) 0 clamp(1.5rem,4vw,2.5rem);
  position:relative;
}
.hero::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(700px 320px at 12% 0%, rgba(217,119,6,0.25), transparent 65%),
    radial-gradient(600px 300px at 85% 20%, rgba(6,182,212,0.16), transparent 60%);
  pointer-events:none;
}
.hero-art{
  width:clamp(140px,26vw,230px);
  aspect-ratio:1/1;
  border-radius:var(--radius-md);
  object-fit:cover;
  box-shadow:0 12px 40px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06);
  flex-shrink:0;
}
.hero-info{min-width:0;}
.hero-info .etiqueta{
  font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--color-accent-light);font-weight:600;margin-bottom:.6rem;
}
.hero-info h1{
  font-family:var(--font-display);font-weight:900;
  font-size:clamp(1.9rem,7vw,4rem);line-height:1;letter-spacing:-.02em;
  overflow-wrap:break-word;
}
.hero-info .meta{
  margin-top:.9rem;color:var(--color-text-muted);font-size:.95rem;
}
.hero-info .meta strong{color:var(--color-text-secondary);font-weight:500;}

/* ---------- Introducción ---------- */
.intro{
  color:var(--color-text-secondary);
  font-size:1.02rem;max-width:70ch;
  padding-bottom:clamp(1.2rem,3vw,2rem);
}

/* ---------- Lista de canciones ---------- */
.lista-titulo{
  font-family:var(--font-display);font-weight:900;
  font-size:clamp(1.2rem,3vw,1.6rem);
  margin-bottom:1rem;padding-top:.5rem;
}
.lista{list-style:none;}
.cancion{
  display:grid;
  grid-template-columns:auto 48px 1fr auto;
  align-items:center;gap:clamp(.6rem,2vw,1rem);
  padding:.6rem .7rem;
  border-radius:var(--radius-sm);
  transition:background .2s ease;
  border-bottom:1px solid rgba(255,255,255,.04);
}
.cancion:hover{background:rgba(255,255,255,.045);}
.cancion .num{
  width:1.8rem;text-align:right;
  color:var(--color-text-muted);font-size:.9rem;font-variant-numeric:tabular-nums;
}
.cancion .mini{
  width:48px;height:48px;border-radius:6px;object-fit:cover;
  background:var(--color-surface-2);
}
.cancion .datos{min-width:0;}
.cancion .datos .t{
  font-weight:500;font-size:1rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.cancion .datos .a{
  font-size:.82rem;color:var(--color-text-muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.pedir{
  display:inline-flex;align-items:center;gap:.45rem;
  background:linear-gradient(135deg,#128c7e,#25d366);
  color:#fff;font-weight:600;font-size:.85rem;
  padding:.5rem 1rem;border-radius:var(--radius-full);
  white-space:nowrap;border:none;cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease;
  min-height:40px;
}
.pedir:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(37,211,102,.3);}
.pedir svg{width:15px;height:15px;fill:currentColor;flex-shrink:0;}
.pedir .txt-largo{display:inline;}
.pedir .txt-corto{display:none;}

/* ---------- Pie ---------- */
.pie{
  margin-top:clamp(2rem,6vw,4rem);
  padding:clamp(1.5rem,4vw,2.5rem) 0;
  border-top:1px solid var(--line);
  text-align:center;color:var(--color-text-muted);font-size:.88rem;
}
.pie a{color:var(--color-accent-light);}
.pie .cta{
  display:inline-block;margin-bottom:1rem;
  background:linear-gradient(135deg,var(--color-primary),#F59E0B);
  color:#111;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  padding:.75rem 1.6rem;border-radius:var(--radius-full);font-size:.9rem;
}

/* =========================================================
   BARRA DE REPRODUCTOR FIJA (estilo Spotify)
   ========================================================= */
.player-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  height:var(--player-height);
  background:rgba(15,27,46,.96);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-top:1px solid rgba(6,182,212,.22);
  display:flex;align-items:center;gap:clamp(.7rem,2.5vw,1.4rem);
  padding:0 clamp(.8rem,3vw,2rem);
}
.player-bar .pb-art{
  width:56px;height:56px;border-radius:8px;object-fit:cover;
  border:1px solid rgba(6,182,212,.35);flex-shrink:0;
  background:var(--color-surface-2);
}
.player-bar .pb-info{min-width:0;flex:1;}
.player-bar .pb-label{
  font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--color-primary);font-weight:700;
}
.player-bar .pb-title{
  font-weight:600;font-size:clamp(.9rem,2.2vw,1.05rem);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  line-height:1.25;
}
.player-bar .pb-artist{
  font-size:clamp(.75rem,1.8vw,.88rem);color:var(--color-accent-light);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.player-bar .pb-play{
  width:56px;height:56px;min-width:56px;border-radius:50%;flex-shrink:0;
  padding:0;overflow:hidden;
  background:linear-gradient(135deg,#8B4513,#A0522D 50%,#CD853F);
  border:2px solid rgba(217,119,6,.45);
  box-shadow:0 4px 14px rgba(0,0,0,.5);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:#fff;transition:transform .2s ease;
}
.player-bar .pb-play:hover{transform:scale(1.07);}
.player-bar .pb-play .material-symbols-outlined{
  font-size:32px;line-height:1;display:block;
  font-family:'Material Symbols Outlined';
}
#radioPlayer{display:none;}

/* ---------- Responsive ---------- */
@media (max-width:640px){
  .hero{flex-direction:column;align-items:flex-start;gap:1.1rem;}
  .cancion{grid-template-columns:40px 1fr auto;gap:.7rem;}
  .cancion .num{display:none;}
  .pedir .txt-largo{display:none;}
  .pedir .txt-corto{display:inline;}
  .pedir{padding:.5rem .8rem;}
  .cancion .mini{width:40px;height:40px;}
  .player-bar .pb-art{width:46px;height:46px;}
  .player-bar .pb-play{width:50px;height:50px;}
  .player-bar .pb-play .material-symbols-outlined{font-size:28px;}
}
@media (max-width:400px){
  .player-bar .pb-label{display:none;}
}

/* =========================================================
   Navegación superior
   ========================================================= */
.topnav{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;justify-content:flex-end;}
.topbar .volver.destacado{
  background:linear-gradient(135deg,var(--color-primary),#F59E0B);
  color:#111;border-color:transparent;font-weight:700;
}
.topbar .volver.destacado:hover{background:linear-gradient(135deg,#F59E0B,var(--color-primary));}

/* =========================================================
   Cabecera sin carátula (índice y buscador)
   ========================================================= */
.hero-simple{padding-bottom:clamp(1rem,3vw,1.6rem);}
.hero-simple .hero-info h1{font-size:clamp(1.8rem,6vw,3.2rem);}

/* =========================================================
   Buscador interno (páginas de artista con muchas canciones)
   ========================================================= */
.buscador-interno{margin-bottom:1rem;}
.buscador-interno input,
.buscador-global input{
  width:100%;
  background:var(--color-surface);
  border:1px solid rgba(6,182,212,.25);
  border-radius:var(--radius-full);
  color:var(--color-text-primary);
  font-family:var(--font-body);
  font-size:1rem;
  padding:.85rem 1.3rem;
  outline:none;
  transition:border-color .2s ease, box-shadow .2s ease;
  min-height:48px;
}
.buscador-interno input::placeholder,
.buscador-global input::placeholder{color:var(--color-text-muted);}
.buscador-interno input:focus,
.buscador-global input:focus{
  border-color:var(--color-accent);
  box-shadow:0 0 0 3px rgba(6,182,212,.15);
}
.sin-resultados{
  color:var(--color-text-muted);font-size:.95rem;
  padding:1.2rem .5rem;text-align:center;
}

/* =========================================================
   Buscador global
   ========================================================= */
.buscador-global{margin-bottom:1.4rem;}
.buscador-global .ayuda{
  color:var(--color-text-muted);font-size:.88rem;
  margin-top:.7rem;padding-left:.4rem;
}
.grupo-res{list-style:none;padding:1.2rem .3rem .5rem;}
.grupo-res h3{
  font-family:var(--font-display);font-weight:900;
  font-size:1.05rem;color:var(--color-accent-light);
  letter-spacing:.02em;
}
.chips{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:.7rem;}
.chip{
  background:rgba(6,182,212,.12);
  border:1px solid rgba(6,182,212,.3);
  color:var(--color-accent-light);
  border-radius:var(--radius-full);
  padding:.45rem 1rem;font-size:.9rem;
  transition:background .2s ease;
}
.chip:hover{background:rgba(6,182,212,.22);}

/* En el buscador las filas no tienen miniatura ni número */
#resultados .cancion{grid-template-columns:1fr auto;}

/* =========================================================
   Índice de artistas
   ========================================================= */
.tarjetas{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:clamp(.7rem,2vw,1.1rem);
  margin-bottom:clamp(1.5rem,4vw,2.5rem);
}
.tarjeta{
  background:var(--color-surface);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:.8rem;
  display:flex;flex-direction:column;gap:.5rem;
  transition:transform .2s ease, background .2s ease;
}
.tarjeta:hover{transform:translateY(-3px);background:var(--color-surface-2);}
.tarjeta img{
  width:100%;aspect-ratio:1/1;object-fit:cover;
  border-radius:8px;background:var(--color-surface-2);
}
.tarjeta .n{font-weight:600;font-size:.95rem;line-height:1.25;}
.tarjeta .c{font-size:.78rem;color:var(--color-text-muted);}

.alfabeto{
  display:flex;flex-wrap:wrap;gap:.4rem;
  margin-bottom:1.5rem;padding:.8rem;
  background:var(--color-surface);border-radius:var(--radius-md);
  position:sticky;top:0;z-index:4;
}
.alfabeto a{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:34px;min-height:34px;
  border-radius:8px;font-weight:600;font-size:.9rem;
  color:var(--color-accent-light);
  transition:background .2s ease;
}
.alfabeto a:hover{background:rgba(6,182,212,.16);}

.grupo{margin-bottom:2rem;scroll-margin-top:4.5rem;}
.grupo h2{
  font-family:var(--font-display);font-weight:900;
  font-size:1.6rem;color:var(--color-primary);
  border-bottom:1px solid var(--line);
  padding-bottom:.4rem;margin-bottom:.8rem;
}
.artistas{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:.3rem;
}
.artistas a{
  display:flex;justify-content:space-between;align-items:center;gap:.6rem;
  padding:.6rem .8rem;border-radius:var(--radius-sm);
  transition:background .2s ease;
  font-size:.95rem;
}
.artistas a:hover{background:rgba(255,255,255,.05);}
.artistas a span{
  color:var(--color-text-muted);font-size:.8rem;
  background:rgba(255,255,255,.06);
  border-radius:var(--radius-full);
  padding:.1rem .5rem;flex-shrink:0;
}

@media (max-width:640px){
  .topbar{flex-wrap:wrap;gap:.6rem;}
  .topnav{width:100%;justify-content:flex-start;}
  .topbar .volver{font-size:.82rem;padding:.4rem .9rem;}
  .tarjetas{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));}
  .artistas{grid-template-columns:1fr;}
}

/* Miga de pan */
.miga{
  padding:1rem 0 0;font-size:.85rem;color:var(--color-text-muted);
}
.miga a{color:var(--color-accent-light);}
.miga a:hover{text-decoration:underline;}

/* Reseña del artista */
.intro .resena{display:block; margin-bottom:.9rem;}
.intro .cta-linea{
  display:block;
  color:var(--color-accent-light);
  font-weight:500;
  border-left:3px solid var(--color-primary);
  padding-left:.9rem;
}

/* Otros artistas relacionados */
.relacionados{
  margin-top:clamp(2rem,5vw,3.5rem);
  padding-top:clamp(1.2rem,3vw,2rem);
  border-top:1px solid var(--line);
}