:root{--accent:#00bfff;--bg:#0a0a0a;--surface:rgba(255,255,255,.07);--text:#fff;--muted:#888}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none}
body{background:url('imagen/bg.jpg') center/cover no-repeat fixed;color:var(--text);font-family:'Arial',sans-serif;height:100dvh;display:flex;flex-direction:column;overflow:hidden}
body::before{content:'';position:fixed;inset:0;background:rgba(0,0,0,.65);backdrop-filter:blur(2px);z-index:0}
body>*{position:relative;z-index:1}

/* ── HEADER ── */
.header{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;background:rgba(0,0,0,.45);backdrop-filter:blur(8px);flex-shrink:0;border-bottom:1px solid rgba(255,255,255,.06)}
.header h1{font-size:1rem;color:var(--muted);font-weight:normal;letter-spacing:.08em}
.header .time{font-size:.9rem;color:var(--muted)}

/* ── MAIN: dos columnas ── */
.main-layout{flex:1;display:flex;flex-direction:row;overflow:hidden;min-height:0}

/* COLUMNA IZQUIERDA — playlist */
.col-left{flex:0 0 52%;display:flex;flex-direction:column;overflow:hidden;border-right:1px solid rgba(255,255,255,.06)}

/* COLUMNA DERECHA — carátula */
.col-right{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden;padding:16px}

.bg-art{position:absolute;inset:-20px;background-size:cover;background-position:center;filter:blur(40px) brightness(.15);transform:scale(1.2);transition:background-image .6s;z-index:0}
.art-wrap{position:relative;z-index:1;width:min(200px,42vw);aspect-ratio:1;border-radius:14px;overflow:hidden;box-shadow:0 10px 50px rgba(0,0,0,.7);flex-shrink:0}
.art-wrap img{width:100%;height:100%;object-fit:cover}
.track-info{position:relative;z-index:1;text-align:center;margin-top:14px;width:100%;padding:0 8px}
.track-title{font-size:1rem;font-weight:bold;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.track-sub{font-size:.78rem;color:var(--muted);margin-top:4px}

/* ── PLAYLIST ── */
.playlist-header{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid rgba(255,255,255,.06);background:rgba(0,0,0,.4);backdrop-filter:blur(6px);flex-shrink:0}
.playlist-header span{font-size:.8rem;color:var(--muted);flex:1}
.search-box{padding:5px 10px;border-radius:20px;border:1px solid #2a2a2a;background:#111;color:#fff;font-size:.8rem;width:120px;outline:none}
.shuffle-btn{background:none;border:none;color:var(--muted);font-size:1rem;cursor:pointer;padding:4px}
.shuffle-btn:active{color:var(--accent)}

.playlist{flex:1;overflow-y:auto;padding:4px 8px 8px;background:rgba(0,0,0,.2)}
.playlist::-webkit-scrollbar{width:3px}
.playlist::-webkit-scrollbar-thumb{background:#2a2a2a;border-radius:2px}

.track-item{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:8px;cursor:pointer;transition:.15s}
.track-item:active,.track-item.active{background:rgba(0,191,255,.15)}
.track-item.active .track-item-title{color:var(--accent)}
.track-thumb{width:44px;height:44px;border-radius:6px;object-fit:cover;flex-shrink:0}
.track-item-info{flex:1;min-width:0}
.track-item-title{font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.track-item-date{font-size:.72rem;color:var(--muted)}
.playing-anim{display:none;align-items:flex-end;gap:2px;height:16px;flex-shrink:0}
.track-item.active .playing-anim{display:flex}
.bar{width:3px;background:var(--accent);border-radius:1px;animation:bounce .6s ease-in-out infinite alternate}
.bar:nth-child(2){animation-delay:.2s}.bar:nth-child(3){animation-delay:.4s}
@keyframes bounce{from{height:4px}to{height:14px}}

/* ── FOOTER: controles ── */
.player-footer{flex-shrink:0;background:rgba(0,0,0,.55);backdrop-filter:blur(10px);border-top:1px solid rgba(255,255,255,.07);padding:8px 16px 10px}

.progress-wrap{width:100%;margin-bottom:6px}
.progress-bar{width:100%;height:4px;background:#333;border-radius:2px;cursor:pointer;position:relative}
.progress-fill{height:100%;background:var(--accent);border-radius:2px;width:0%;transition:width .5s linear;pointer-events:none}
.times{display:flex;justify-content:space-between;font-size:.68rem;color:var(--muted);margin-top:3px}

.footer-row{display:flex;align-items:center;justify-content:space-between;gap:8px}

.controls{display:flex;align-items:center;justify-content:center;gap:16px}
.ctrl{background:none;border:none;color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:.15s}
.ctrl:active{transform:scale(.9)}
.ctrl.sm{width:48px;height:48px;font-size:1.5rem;background:var(--surface)}
.ctrl.lg{width:60px;height:60px;font-size:1.8rem;background:var(--accent);box-shadow:0 4px 20px rgba(0,191,255,.4)}
.ctrl.lg:active{background:#0099cc}

.vol-wrap{display:flex;align-items:center;gap:8px;flex:1;max-width:180px}
.vol-icon{font-size:1rem;color:var(--muted)}
input[type=range]{flex:1;height:4px;-webkit-appearance:none;background:#333;border-radius:2px;outline:none;cursor:pointer}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--accent);cursor:pointer}

/* status */
#statusMsg{position:fixed;bottom:90px;left:50%;transform:translateX(-50%);background:#222;color:#aaa;padding:6px 14px;border-radius:20px;font-size:.78rem;display:none;z-index:99}

/* ── GEAR BUTTON ── */
.gear-btn{background:none;border:none;font-size:1.2rem;cursor:pointer;padding:4px;border-radius:50%;transition:.2s;line-height:1}
.gear-btn:active{transform:rotate(45deg)}

/* ── MODAL AJUSTES ── */
#modalAjustes{display:none;position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.7);backdrop-filter:blur(4px);align-items:flex-end;justify-content:center}
#modalAjustes.open{display:flex}
.modal-box{width:100%;max-width:480px;background:#111;border-radius:16px 16px 0 0;overflow:hidden;max-height:85dvh;display:flex;flex-direction:column;animation:slideUp .25s ease}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid #222;font-size:.95rem;font-weight:bold}
.modal-head button{background:none;border:none;color:#aaa;font-size:1.2rem;cursor:pointer;padding:4px 8px;border-radius:6px}
.modal-head button:active{background:#222}
#ajustesFrame{flex:1;border:none;width:100%;min-height:400px}

/* ── LOADER ── */
#loader{
  position:fixed;inset:0;z-index:999;
  background:radial-gradient(ellipse at center, #0d1117 0%, #000 100%);
  display:flex;align-items:center;justify-content:center;
  transition:opacity .6s ease, transform .6s ease;
}
#loader.hide{opacity:0;transform:scale(1.04);pointer-events:none}

.loader-inner{display:flex;flex-direction:column;align-items:center;gap:20px}

/* Barras ecualizador */
.eq{display:flex;align-items:flex-end;gap:5px;height:60px}
.eq span{
  display:block;width:8px;border-radius:4px 4px 0 0;
  background:linear-gradient(to top, #00bfff, #7b2fff);
  animation:eq-bounce .9s ease-in-out infinite alternate;
  box-shadow:0 0 8px #00bfff88;
}
.eq span:nth-child(1){animation-duration:.7s;animation-delay:0s}
.eq span:nth-child(2){animation-duration:.9s;animation-delay:.1s}
.eq span:nth-child(3){animation-duration:.6s;animation-delay:.2s}
.eq span:nth-child(4){animation-duration:1.1s;animation-delay:.05s}
.eq span:nth-child(5){animation-duration:.8s;animation-delay:.15s}
.eq span:nth-child(6){animation-duration:.65s;animation-delay:.25s}
.eq span:nth-child(7){animation-duration:.95s;animation-delay:.08s}

@keyframes eq-bounce{
  from{height:8px;opacity:.5}
  to{height:56px;opacity:1}
}

.loader-title{
  font-size:1.4rem;font-weight:bold;letter-spacing:.3em;
  color:#fff;text-shadow:0 0 20px #00bfff88;
}
.loader-sub{font-size:.75rem;color:#444;letter-spacing:.2em;text-transform:uppercase}