/* =========================================================
   MegaUploads — Tema Spotify (oscuro, responsive, canvas)
   ========================================================= */
:root{
  /* Paleta Spotify-like */
  --bg0:#0b0f14;           /* fondo base */
  --bg1:#0f151b;           /* tarjetas */
  --bg2:#121a21;           /* controles */
  --stroke:#1f2a33;        /* líneas */
  --text:#eaf2f9;
  --muted:#9fb4c7;
  --accent:#1DB954;        /* verde Spotify */
  --accent-2:#2bb2ff;      /* celeste acciones secundarias */
  --shadow:0 12px 28px rgba(0,0,0,.35);
  --radius-lg:18px;
  --radius-md:14px;
  --radius-sm:10px;

  /* Layout base */
  --sidebar-w: 250px;      /* ancho sidebar desktop */
  --header-h: 46px;        /* topbar/menú horizontal delgado */
}

/* Reset esencial */
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--text); font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background: radial-gradient(1100px 700px at 20% -10%, #13212b 0%, var(--bg1) 55%, var(--bg0) 100%);
  overflow-x:hidden;
}

/* ================= Canvas de fondo (ritmo) ================= */
#bgPulse{
  position:fixed; inset:0; z-index:-1; width:100vw; height:100vh;
  pointer-events:none; display:block;
}

/* ================= Navegación (delgada) ================= */
.topbar{
  position:sticky; top:0; z-index:40;
  height:var(--header-h);
  display:flex; align-items:center; gap:8px;
  padding:0 10px;
  background:linear-gradient(180deg,#0e141b,#0b1116);
  border-bottom:1px solid var(--stroke);
  box-shadow:0 8px 18px rgba(0,0,0,.25);
}
.topbar .brand{font-weight:900; letter-spacing:.3px; font-size:15px}
.topbar .brand span{color:var(--accent)}
.topbar .nav{display:flex; gap:6px; align-items:center; margin-left:10px; overflow:auto hidden}
.topbar .nav a{
  color:var(--text); opacity:.85; padding:6px 9px; font-weight:700;
  text-decoration:none; text-transform:uppercase; font-size:12px;
  border-radius:6px; border:1px solid rgba(255,255,255,.09);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(0,0,0,.06));
  white-space:nowrap;
}
.topbar .nav a:hover{opacity:1; background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(0,0,0,.09))}
.badge,.btn{margin-left:auto}

/* ================= Contenedor ================= */
.container{
  width:min(1200px,96vw);
  margin:0 auto; padding:0 12px;
}

/* ================= Player superior de playlist (ultra delgado) ================= */
.player-spotify{
  background:var(--bg2); border:1px solid var(--stroke);
  border-radius:var(--radius-md); box-shadow:var(--shadow);
  padding:6px 10px;
}
.player-spotify .row{
  display:grid; grid-template-columns:1fr auto; align-items:center; gap:8px;
}
.play-cta{
  position:relative;
  width:46px; height:46px; border-radius:999px; border:0; cursor:pointer;
  background:var(--accent-2);
  box-shadow:0 6px 14px rgba(43,178,255,.35), inset 0 0 0 2px rgba(255,255,255,.15);
}
.play-cta::before{ /* triángulo white */
  content:""; position:absolute; inset:0; margin:auto; width:0; height:0;
  border-left:14px solid #fff; border-top:9px solid transparent; border-bottom:9px solid transparent;
  transform:translateX(2px);
}
.play-cta.is-paused::before{ /* pause */
  width:16px; height:16px; border:0; background:
    linear-gradient(#fff,#fff) left/5px 100% no-repeat,
    linear-gradient(#fff,#fff) right/5px 100% no-repeat;
  border-radius:2px; transform:none;
}

/* ================= Portada pequeña con título overlay ================= */
.cover-box{ position:relative; width:min(200px, 58vw); }
@media (min-width:900px){ .cover-box{ width:220px } }
.cover-img{
  width:100%; aspect-ratio:1/1; object-fit:cover;
  border-radius:14px; border:1px solid var(--stroke); box-shadow:0 12px 28px rgba(0,0,0,.35)
}
.cover-title{
  position:absolute; left:6px; right:6px; bottom:6px;
  padding:8px 10px; border-radius:10px;
  background:linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.65) 70%);
  color:#fff; font-weight:900; text-transform:uppercase;
  font-size: clamp(12px, 2.4vw, 15px);
  text-shadow:0 1px 2px rgba(0,0,0,.5);
}

/* ================= Lista de canciones ================= */
.tracklist{list-style:none; margin:0; padding:0}
.track-row{
  position:relative; padding:10px 12px; border-bottom:1px solid #16212a; cursor:pointer;
}
.track-row .row-inner{display:grid; grid-template-columns:1fr auto; gap:12px; align-items:center}
.track-actions{display:flex; gap:8px; min-width:112px; justify-content:flex-end}
.btn.download{background:#1a2430; border-color:#263544}
.btn.download:hover{background:#213042}
.track-info{overflow:hidden}
.track-info strong{display:block; text-transform:uppercase; white-space:nowrap}
.track-info .ticker{display:inline-block; white-space:nowrap; will-change:transform; animation:marquee 14s linear infinite}
.track-info .ticker span{padding-right:2rem}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

.eq-canvas{position:absolute; inset:0; z-index:-1; opacity:.45; filter:saturate(1.2) drop-shadow(0 10px 25px rgba(0,0,0,.35))}
.track-row.active{background:linear-gradient(180deg, rgba(255,255,255,.045), transparent 60%)}

/* ================= Sticky y scroll interno ================= */
.hero-sticky{position:sticky; top:var(--header-h); z-index:5}
.songs-scroll{
  --hero-h:230px;
  max-height: calc(100vh - var(--header-h) - var(--hero-h));
  overflow:auto; scrollbar-width:none; -ms-overflow-style:none;
}
.songs-scroll::-webkit-scrollbar{display:none}

/* ================= Grids / Tarjetas (home/admin) ================= */
.grid{
  display:grid; gap:16px;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
}
.card{
  background:var(--bg1); border:1px solid var(--stroke); border-radius:var(--radius-lg);
  overflow:hidden; box-shadow:var(--shadow);
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.card:hover{transform:translateY(-2px); box-shadow:0 16px 36px rgba(0,0,0,.45)}
.card .cover{width:100%; aspect-ratio:1/1; object-fit:cover; display:block}
.card .body{padding:12px}

/* ================= Botones / inputs / tablas ================= */
.btn{
  padding:9px 12px; border-radius:12px; border:1px solid #22303a;
  background:#16212b; color:var(--text); font-weight:700; cursor:pointer;
  transition:transform .12s ease, background .2s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn.primary{background:var(--accent); color:#051b0e; border-color:#0f3a25}
.btn.small{padding:7px 10px; font-size:.9rem}
input,select,textarea{
  width:100%; padding:10px; border-radius:10px; background:#0f151a; border:1px solid #26323c; color:var(--text)
}
.table{width:100%; border-collapse:collapse; background:var(--bg1); border:1px solid var(--stroke); border-radius:12px; overflow:hidden}
.table th,.table td{padding:10px 12px; border-bottom:1px solid #1a2630}

/* ================= Responsive ================= */
@media (max-width:980px){
  :root{ --header-h: 48px; }
  .container{padding:0 12px}
  .songs-scroll{--hero-h:210px}
  .play-cta{width:44px; height:44px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
}