/* ===== Variables ===== */
:root{
  --bg: #0b0b12;
  --panel: #121222;
  --panel-2: #17172a;
  --text: #e7e7f1;
  --muted: #a8a8be;
  --border: #24243a;
  --accent: #7c5cff;   /* dinámico por portada */
  --accent-2: #9e8cff; /* dinámico por portada */
  --accent-rgb: 124,92,255;

  --radius: 18px;
  --radius-sm: 12px;
  --shadow: 0 8px 30px rgba(0,0,0,.35);

  --sidebar-w: 320px; /* ← ancho sidebar, colapsable */
}

/* ===== Reset básico ===== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", "Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol";
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#app{
  display:grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height:100vh;
  transition: grid-template-columns .24s ease;
}

/* ===== Sidebar ===== */
.sidebar{
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border-right: 1px solid var(--border);
  padding: 18px;
  overflow-y:auto;
}
.brand{ display:flex; gap:10px; align-items:center; margin-bottom:16px; }
.brand .logo{ font-size:22px }
.brand .name{ font-weight:700; letter-spacing:.3px }

.uploader{ display:flex; flex-direction:column; gap:12px; margin:8px 0 16px }
.btn.upload{
  position:relative; overflow:hidden; cursor:pointer;
  display:flex; align-items:center; gap:10px;
  background:#1c1c31; border:1px dashed #2a2a46; color:var(--text);
  padding:10px 12px; border-radius: var(--radius-sm);
}
.btn.upload input{ position:absolute; inset:0; opacity:0; cursor:pointer }
.btn.subtle{
  background:#151525; border:1px solid #22223a; color:var(--muted);
  padding:8px 10px; border-radius: var(--radius-sm);
}

/* Mostrar/ocultar acciones de creador */
.owner-only{ display:none !important; }
body.owner .owner-only{ display:flex !important; }

/* Biblioteca en sidebar */
.library{ display:grid; gap:12px }
.library.empty{ display:block }
.library .card{
  display:flex; gap:12px; align-items:center;
  background:#151528; border:1px solid #23233c;
  border-radius: var(--radius-sm); padding:8px; cursor:pointer;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.library .card:hover{ transform: translateY(-1px); border-color:#2e2e54; background:#181832 }
.library .card img{ width:56px; height:56px; border-radius:12px; object-fit:cover; flex-shrink:0 }
.library .card .meta .title{ font-weight:600; line-height:1.2 }
.library .card .meta .desc{ color:var(--muted); font-size:.9rem }

/* ===== Backdrop (mobile) ===== */
.backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.5); display:none; }
body.sidebar-open .backdrop{ display:block }

/* ===== Main ===== */
.main{ position:relative; overflow:hidden; }
.ambient{
  position:absolute; inset:0; z-index:0;
  background-position:center; background-size:cover; background-repeat:no-repeat;
  filter: blur(60px) saturate(1.15);
  opacity:.45;
}
.topbar{
  position:relative; z-index:1;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px; border-bottom:1px solid var(--border);
  background: linear-gradient(180deg, rgba(16,16,28,.65), rgba(16,16,28,.2));
  backdrop-filter: blur(6px);
}
.mobile-only{ display:none }
.icon-btn{ background:#151525; border:1px solid #22223a; border-radius:12px; padding:8px 10px; color:var(--text) }
.icon-btn.small{ padding:6px 9px; font-size:.95rem }
.nowplaying{ display:flex; gap:12px; align-items:center }
.nowplaying .cover{ width:44px; height:44px; border-radius:10px; object-fit:cover }
.nowplaying .title{ margin:0; font-size:1.1rem }
.nowplaying .desc{ margin:0; }

/* ======= HOME (lista vertical centrada) ======= */
.home{ position:relative; z-index:1; padding:28px 20px 36px; }
.center{ text-align:center }
.home-list{
  width:min(900px, 96%);
  margin:0 auto;
  display:flex; flex-direction:column; gap:14px;
}
.home .card{
  display:flex; gap:14px; align-items:center;
  background: rgba(18,18,35,.75); border:1px solid #242445;
  border-radius: 16px; padding:10px 12px; cursor:pointer;
  box-shadow: var(--shadow); backdrop-filter: blur(8px);
}
.home .card:hover{ transform: translateY(-1px); border-color:#2e2e54; background:#181832 }
.home .card img{ width:64px; height:64px; border-radius:14px; object-fit:cover; flex-shrink:0 }
.home .card .meta .title{ font-weight:600; font-size:1.05rem }
.home .card .meta .desc{ color:var(--muted) }

/* ===== Player ===== */
.player{ position:relative; z-index:1; padding:32px 22px 40px; }
.player-stack{
  max-width: 980px; margin: 0 auto;
  display:grid; grid-template-columns: 360px 1fr; gap:28px;
  align-items: start;
}
.player-visual{ position:relative; display:flex; align-items:center; justify-content:center; }
.cover-lg{
  width:100%; max-width:360px; aspect-ratio:1/1; object-fit:cover; border-radius:24px;
  box-shadow: 0 20px 60px rgba(var(--accent-rgb), .25), 0 6px 18px rgba(0,0,0,.4);
  position:relative;
}
.cover-lg::after{
  content:""; position:absolute; inset:-8%; z-index:-1; border-radius:28px;
  background: radial-gradient(60% 60% at 50% 50%, rgba(var(--accent-rgb),.35), rgba(0,0,0,0) 70%);
  filter: blur(18px);
}

.player-controls{
  background: rgba(18,18,35,.75); border:1px solid #242445;
  border-radius: 24px; padding:20px; box-shadow: var(--shadow);
  backdrop-filter: blur(8px);
}
.node-title-row{ display:none !important; } /* Oculta 'audio1' y el #id */

.audio-row{ display:flex; flex-direction:column; gap:10px }
.media-controls{ display:grid; grid-template-columns: auto 1fr auto auto; gap:12px; align-items:center; }
.btn{
  border:none; outline:none; cursor:pointer; color:var(--text);
  background:#1b1b2f; border:1px solid #272744; border-radius:12px;
  padding:8px 12px; transition: transform .1s ease, background .1s ease, border-color .1s ease;
}
.btn:hover{ transform: translateY(-1px); background:#202040; border-color:#2d2d52 }
.btn.primary{ background: linear-gradient(180deg, var(--accent-2), var(--accent)); border:none; color:#fff }
.btn.round{ width:42px; height:42px; border-radius:50% }
.btn.ghost-thin{ background: transparent; border:1px solid #2a2a49; color:var(--muted); }

/* NUEVO: icon/danger para acciones */
.btn.icon{ padding:6px 8px; border-radius:10px; }
.btn.danger{ border-color:#5a2340; color:#ff92b2; background:#23101a; }
.btn.danger:hover{ background:#311726; border-color:#7c3557; }

.timeline{ position:relative; height:34px; display:flex; align-items:center; }
.timeline .track{ position:absolute; left:0; right:0; height:4px; border-radius:999px; background:#202040; }
.timeline .buffered{ position:absolute; left:0; top:0; height:4px; border-radius:999px; background:#2a2a58; width:0%; }
.timeline .progress{
  position:absolute; left:0; top:0; height:4px; border-radius:999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  width:0%;
}
#seek{ position:relative; width:100%; background:transparent; appearance:none; height:34px; }
#seek::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:12px; height:12px; border-radius:50%;
  background: var(--accent-2); border:2px solid #fff2;
  box-shadow: 0 0 0 6px rgba(var(--accent-rgb), .18);
  margin-top:-4px;
}
.time{ font-variant-numeric: tabular-nums; color:var(--muted) }
.sep{ opacity:.65; margin:0 6px }

.decisions-wrap{ min-height:88px; margin-top:12px }
.choices{ display:flex; gap:10px; flex-wrap:wrap }
.choice-btn{ background:#1b1b2f; border:1px solid #272744; }
.choice-btn:hover{ background:#202040; border-color:#2d2d52; }

.code-box{ display:flex; flex-direction:column; gap:8px }
.code-box input{
  width:100%; padding:10px 12px; border-radius:12px; background:#101020; border:1px solid #23234a; color:var(--text);
}
.code-actions{ display:flex; gap:8px }

.muted{ color:var(--muted) }
.tiny{ font-size:.82rem }

/* Acciones en cards (solo creador) */
.card .actions{ margin-left:auto; display:flex; gap:6px; }

/* Animación de aparición */
.reveal{ animation: pop .16s ease both }
@keyframes pop{ from{ transform:scale(.98); opacity:0 } to{ transform:scale(1); opacity:1 } }

/* Utilidades */
.hidden{ display:none !important }

/* ===== Modal (siempre por encima) ===== */
.modal{
  position:fixed; inset:0;
  display:flex; align-items:center; justify-content:center;
  background: rgba(0,0,0,.55);
  z-index: 9999;
}
.modal.hidden{ display:none }
.modal-card{
  position:relative; z-index:10000;
  width:min(92vw, 380px);
  background:#151528; border:1px solid #23233c; border-radius:18px; padding:16px; box-shadow: var(--shadow);
}
.modal-actions{ display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
body.modal-open .sidebar,
body.modal-open .main{ pointer-events: none; }
body.modal-open .modal{ pointer-events: auto; }
body.modal-open{ overflow:hidden; }

/* ===== Responsive ===== */
@media (max-width: 1024px){
  .player-stack{ grid-template-columns: 300px 1fr; }
}
@media (max-width: 768px){
  #app{ grid-template-columns: 1fr }
  .sidebar{
    position:fixed; left:0; top:0; bottom:0; width: 84vw; max-width: 360px;
    z-index:20; transform: translateX(-100%); transition: transform .24s ease;
  }
  body.sidebar-open .sidebar{ transform: translateX(0) }
  .mobile-only{ display:inline-flex }
  .home{ padding:20px 14px 24px }
  .player{ padding:20px 14px 28px }
  .player-stack{ grid-template-columns: 1fr; gap:16px }
  .cover-lg{ max-width: 78vw }
}

/* ==== Colapso de sidebar (desktop) ==== */
body.sidebar-collapsed{ --sidebar-w: 0px; }
body.sidebar-collapsed .sidebar{ padding:0; border-right:none; overflow:hidden; }
body.sidebar-collapsed .mobile-only{ display:inline-flex !important; }