/* ===== Login ===== */
body.login{min-height:100vh;display:grid;place-items:center;padding:1.5rem;
  background:radial-gradient(900px 500px at 85% -10%,rgba(245,165,36,.18),transparent),radial-gradient(700px 500px at -10% 110%,rgba(45,212,191,.14),transparent),var(--bg)}
.lbox{width:min(400px,100%);background:linear-gradient(180deg,var(--card),var(--bg2));border:1px solid var(--line);border-radius:20px;padding:2rem;display:grid;gap:1rem;box-shadow:0 40px 80px -30px #000}
.lbox h1{font-size:1.6rem;margin-top:.6rem}
.mut{color:var(--mut);font-size:.95rem}
.lbox form{display:grid;gap:.9rem;margin-top:.4rem}
.lbox label{display:grid;gap:.35rem;font-size:.85rem;color:var(--mut)}
.lbox input{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:.75rem .9rem;color:var(--txt);font-size:1rem}
.lbox input:focus{border-color:var(--acc);outline:none}
.err{min-height:1.2em;color:#ff8a8a;font-size:.88rem}
.lbox .btn{width:100%}
.back{color:var(--mut);font-size:.9rem;justify-self:center}
.back:hover{color:var(--txt)}

/* ===== Shell ===== */
body.app{min-height:100vh;padding-bottom:0}
body.app.conplayer{padding-bottom:96px}
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:1.4rem;height:62px;padding:0 1.4rem;background:rgba(8,11,17,.86);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.tabs{display:flex;gap:.3rem}
.tabs a{padding:.45rem 1rem;border-radius:99px;color:var(--mut);font-weight:600;font-size:.95rem}
.tabs a:hover{color:var(--txt)}
.tabs a.on{background:var(--card2);color:var(--txt)}
.who{margin-left:auto;display:flex;align-items:center;gap:.8rem;color:var(--mut);font-size:.9rem}
.toast{position:fixed;left:50%;bottom:110px;transform:translate(-50%,20px);background:var(--card2);border:1px solid var(--line);padding:.6rem 1.1rem;border-radius:99px;font-size:.9rem;opacity:0;pointer-events:none;transition:.25s;z-index:100}
.toast.on{opacity:1;transform:translate(-50%,0)}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:grid;place-items:center;z-index:120;padding:1rem}
.modalbox{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:1.4rem;width:min(380px,100%);display:grid;gap:1rem}
.modalbox input{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:.7rem .9rem;color:var(--txt)}
.modalbox .row{display:flex;gap:.6rem;justify-content:flex-end}
.vacio{padding:3rem 1rem;text-align:center;color:var(--mut)}

/* ===== CINE ===== */
.cine{padding-bottom:3rem}
.hero2{position:relative;min-height:min(56vh,480px);display:flex;align-items:flex-end;padding:2.4rem 1.6rem;background-size:cover;background-position:center;isolation:isolate}
.hero2::before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,var(--bg) 4%,rgba(8,11,17,.55) 45%,rgba(8,11,17,.2)),linear-gradient(90deg,rgba(8,11,17,.85),transparent 60%);z-index:-1}
.hero2 .in{max-width:620px}
.hero2 .tag{color:var(--acc2);font-weight:700;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase}
.hero2 h2{font-size:clamp(1.7rem,4.2vw,3rem);line-height:1.1;margin:.4rem 0 1rem;letter-spacing:-.01em}
.hero2 .acts{display:flex;gap:.7rem;flex-wrap:wrap}
.cbar{display:flex;align-items:center;gap:1rem;padding:1.2rem 1.6rem .2rem}
.cbar h1{font-size:1.25rem}
.buscar{margin-left:auto;display:flex;align-items:center;gap:.5rem;background:var(--card);border:1px solid var(--line);border-radius:99px;padding:.45rem .9rem;min-width:min(280px,100%)}
.buscar input{background:none;border:0;outline:0;color:var(--txt);width:100%}
.fila{padding:1rem 0 .4rem}
.fila h3{padding:0 1.6rem;font-size:1.1rem;margin-bottom:.7rem}
.fila h3 small{color:var(--mut);font-weight:400;margin-left:.4rem}
.carril{display:flex;gap:.8rem;overflow-x:auto;padding:.2rem 1.6rem 1rem;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.vcard{flex:0 0 230px;scroll-snap-align:start;text-align:left;border-radius:12px;overflow:hidden;background:var(--card);border:1px solid var(--line);transition:transform .18s,border-color .18s}
.vcard:hover{transform:scale(1.04);border-color:#3a4a68;z-index:2}
.vcard .th{position:relative;aspect-ratio:16/9;background-size:cover;background-position:center}
.vcard .th img{width:100%;height:100%;object-fit:cover}
.vcard .th .pl{position:absolute;inset:0;display:grid;place-items:center;opacity:0;background:rgba(0,0,0,.35);transition:.18s}
.vcard:hover .pl{opacity:1}
.vcard .pl .ico{width:42px;height:42px}
.vcard .pr{height:3px;background:rgba(255,255,255,.18)}
.vcard .pr i{display:block;height:100%;background:var(--acc)}
.vcard .tx{padding:.6rem .75rem .75rem}
.vcard .tx b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:.9rem;line-height:1.3;font-weight:600}
.vcard .tx span{color:var(--mut);font-size:.78rem}
.rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:.9rem;padding:1rem 1.6rem}
.rejilla .vcard{flex:none}

/* reproductor de video */
.vplayer{position:fixed;inset:0;z-index:90;background:#000;display:grid;grid-template-columns:1fr;grid-template-rows:auto 1fr}
.vplayer.lista-on{grid-template-columns:1fr 320px}
.vplayer header{grid-column:1/-1;display:flex;align-items:center;gap:.8rem;padding:.7rem 1rem;background:linear-gradient(#000,transparent);position:absolute;inset:0 0 auto 0;z-index:3;transition:opacity .3s}
.vplayer.quieto header{opacity:0}
.vplayer header h4{margin:0;font-size:1rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.vplayer .ib{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.1)}
.vplayer .ib:hover{background:rgba(255,255,255,.22)}
.vstage{position:relative;grid-row:1/-1;min-width:0;display:grid;place-items:center;background:#000}
.vstage video{width:100%;height:100%;object-fit:contain;background:#000}
.vstatus{position:absolute;inset:0;display:grid;place-content:center;gap:.8rem;text-align:center;color:#cfd6e4;background:rgba(0,0,0,.72);z-index:2}
.vstatus .bar{width:240px;height:6px;border-radius:9px;background:#2a3346;overflow:hidden;margin:0 auto}
.vstatus .bar i{display:block;height:100%;width:0;background:var(--acc);transition:width .5s}
.vlist{grid-row:1/-1;grid-column:2;overflow:auto;background:var(--bg2);border-left:1px solid var(--line);padding:3.6rem .6rem 1rem}
.vlist .gh{padding:.8rem .6rem .3rem;color:var(--mut);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase}
.vlist button{display:block;width:100%;text-align:left;padding:.55rem .7rem;border-radius:8px;font-size:.88rem;color:#c3cbdb}
.vlist button:hover{background:var(--card2)}
.vlist button.on{background:rgba(245,165,36,.16);color:var(--acc)}
@media (max-width:800px){.vplayer.lista-on{grid-template-columns:1fr}.vplayer.lista-on .vlist{position:absolute;inset:0 0 0 22%;z-index:4}}

/* ===== MÚSICA ===== */
.mus{display:grid;grid-template-columns:240px 1fr;height:calc(100vh - 62px);}
body.conplayer .mus{height:calc(100vh - 62px - 88px)}
.side{border-right:1px solid var(--line);padding:1rem .7rem;overflow:auto;background:var(--bg2);display:flex;flex-direction:column;gap:.15rem}
.side .nv{display:flex;align-items:center;gap:.8rem;padding:.6rem .8rem;border-radius:9px;color:var(--mut);font-weight:600;font-size:.94rem;text-align:left;width:100%}
.side .nv:hover{color:var(--txt);background:var(--card)}
.side .nv.on{color:var(--txt);background:var(--card2)}
.side .sep{height:1px;background:var(--line);margin:.7rem .5rem}
.side .lh{display:flex;align-items:center;justify-content:space-between;padding:.2rem .8rem;color:var(--mut);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase}
.side .lh button{color:var(--mut);display:grid;place-items:center;width:28px;height:28px;border-radius:50%}
.side .lh button:hover{background:var(--card2);color:var(--txt)}
.main{overflow:auto;padding:1.4rem 1.6rem 2rem;position:relative;scroll-behavior:auto}
.main h1{font-size:1.6rem;margin-bottom:1rem;letter-spacing:-.01em}
.main h2{font-size:1.15rem;margin:1.6rem 0 .8rem}
.mb{display:flex;align-items:center;gap:.8rem;margin-bottom:1.2rem;flex-wrap:wrap}
.bigplay{width:54px;height:54px;border-radius:50%;background:var(--acc);color:var(--acc-ink);display:grid;place-items:center;transition:transform .15s}
.bigplay:hover{transform:scale(1.07)}
.bigplay .ico{width:30px;height:30px}
.circ{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:var(--mut);border:1px solid var(--line)}
.circ:hover{color:var(--txt);border-color:var(--mut)}
.cerrar-lat{display:none}
.finder{display:flex;align-items:center;gap:.6rem;background:var(--card2);border-radius:99px;padding:.6rem 1.1rem;max-width:460px;margin-bottom:1.2rem}
.finder input{background:none;border:0;outline:0;width:100%;color:var(--txt)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:1rem}
.mc{padding:.8rem;border-radius:12px;background:var(--card);text-align:left;transition:background .15s;display:block;width:100%}
.mc:hover{background:var(--card2)}
.mc .cv{margin-bottom:.7rem}
.mc b{display:block;font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mc span{display:block;color:var(--mut);font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mc.art .cv{border-radius:50%}
.cv{position:relative;aspect-ratio:1;border-radius:8px;overflow:hidden;display:grid;place-items:center;color:rgba(255,255,255,.7);font-weight:800;font-size:2rem;background-size:cover}
.cv img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cv.s{width:44px;height:44px;aspect-ratio:auto;font-size:1.1rem;border-radius:6px;flex:none}
.cabeza{display:flex;gap:1.4rem;align-items:flex-end;margin-bottom:1.4rem;flex-wrap:wrap}
.cabeza .cv{width:min(190px,40vw);font-size:3.4rem;box-shadow:0 18px 40px -12px #000;flex:none}
.cabeza.art .cv{border-radius:50%}
.cabeza small{color:var(--mut);text-transform:uppercase;letter-spacing:.12em;font-size:.75rem}
.cabeza h1{font-size:clamp(1.6rem,4vw,2.8rem);margin:.2rem 0 .4rem}
.cabeza p{color:var(--mut)}
.tl{display:grid;gap:0}
.tr{display:grid;grid-template-columns:44px 1fr 1fr 40px 40px;align-items:center;gap:.8rem;padding:.4rem .6rem;border-radius:8px;cursor:pointer}
.tr:hover{background:var(--card)}
.tr.on{background:rgba(245,165,36,.1)}
.tr.on .tt{color:var(--acc)}
.tr .nn{color:var(--mut);text-align:center;font-size:.9rem;position:relative}
.tr .nn .ico{display:none;margin:auto}
.tr:hover .nn span{display:none}.tr:hover .nn .ico{display:block}
.tr .info{display:flex;align-items:center;gap:.8rem;min-width:0}
.tr .info div{min-width:0}
.tr .tt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500}
.tr .sub,.tr .alb{color:var(--mut);font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tr .ib2{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;color:var(--mut)}
.tr .ib2:hover{color:var(--txt);background:var(--card2)}
.tr .ib2.liked{color:var(--acc)}
.tr .ib2 .ico{width:20px;height:20px}
.tr.cab{cursor:default;color:var(--mut);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;border-bottom:1px solid var(--line);border-radius:0;margin-bottom:.3rem}
.tr.cab:hover{background:none}
.mas{padding:1rem;text-align:center;color:var(--mut)}

/* barra del reproductor */
.musicbar{position:fixed;inset:auto 0 0 0;height:88px;z-index:40;background:rgba(10,14,22,.97);backdrop-filter:blur(14px);border-top:1px solid var(--line);display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,560px) minmax(0,1fr);align-items:center;gap:1rem;padding:0 1.2rem}
.mb-info{display:flex;align-items:center;gap:.8rem;min-width:0}
.mb-info .cv{width:56px;height:56px;aspect-ratio:auto;font-size:1.3rem;flex:none}
.mb-info div{min-width:0}
.mb-info b{display:block;font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mb-info span{color:var(--mut);font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.mb-mid{display:grid;gap:.25rem}
.mb-ctl{display:flex;align-items:center;justify-content:center;gap:.5rem}
.mb-ctl button{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:var(--mut)}
.mb-ctl button:hover{color:var(--txt)}
.mb-ctl button.act{color:var(--acc)}
.mb-ctl .pp{width:44px;height:44px;background:var(--txt);color:var(--bg)}
.mb-ctl .pp:hover{color:var(--bg);transform:scale(1.06)}
.mb-ctl .r1{position:relative}
.mb-ctl .r1::after{content:"1";position:absolute;right:6px;top:8px;font-size:.6rem;font-weight:800}
.mb-seek{display:grid;grid-template-columns:42px 1fr 42px;align-items:center;gap:.6rem;color:var(--mut);font-size:.75rem;font-variant-numeric:tabular-nums}
.mb-seek span:first-child{text-align:right}
.mb-right{display:flex;align-items:center;justify-content:flex-end;gap:.6rem}
.mb-right button{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:var(--mut)}
.mb-right button:hover,.mb-right button.act{color:var(--acc)}
input[type=range]{-webkit-appearance:none;appearance:none;height:5px;border-radius:9px;background:linear-gradient(90deg,var(--txt) var(--p,0%),#2d384d var(--p,0%));width:100%;cursor:pointer}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:var(--txt);opacity:0}
input[type=range]:hover::-webkit-slider-thumb{opacity:1}
input[type=range]::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:var(--txt)}
.vol{width:96px}
.cola{position:fixed;top:62px;right:0;bottom:88px;width:340px;max-width:100%;background:var(--bg2);border-left:1px solid var(--line);z-index:35;overflow:auto;padding:1rem .7rem;transform:translateX(100%);transition:transform .25s}
.cola.on{transform:none}
.cola h3{font-size:1rem;margin:.2rem .5rem .6rem}
.cola .sec{color:var(--mut);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;margin:1rem .5rem .4rem}
.qi{display:flex;align-items:center;gap:.7rem;width:100%;text-align:left;padding:.4rem .5rem;border-radius:8px}
.qi:hover{background:var(--card)}
.qi.on b{color:var(--acc)}
.qi div{min-width:0;flex:1}
.qi b{display:block;font-size:.88rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qi span{color:var(--mut);font-size:.78rem;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.menu{position:fixed;z-index:110;min-width:210px;max-width:290px;max-height:60vh;overflow:auto;background:var(--card2);border:1px solid var(--line);border-radius:12px;padding:.35rem;box-shadow:0 20px 50px -10px #000}
.menu button{display:block;width:100%;text-align:left;padding:.55rem .8rem;border-radius:7px;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.menu button:hover{background:var(--line)}
.menu .sep{height:1px;background:var(--line);margin:.3rem}

@media (max-width:860px){
  .mus{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .side{flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line);padding:.5rem}
  .side .nv{width:auto;white-space:nowrap;padding:.45rem .8rem}
  .side .sep,.side .lh,.side .plist{display:none}
  .tr{grid-template-columns:44px 1fr 40px 40px}.tr .alb{display:none}
  .musicbar{grid-template-columns:1fr auto;height:auto;padding:.5rem .8rem;gap:.4rem}
  .mb-mid{grid-column:1/-1;grid-row:2}
  .mb-right .vol,.mb-right .volb{display:none}
  body.conplayer{padding-bottom:140px}
  body.conplayer .mus{height:calc(100vh - 62px - 140px)}
  .cola{bottom:140px}
  .topbar{gap:.7rem;padding:0 .8rem}
  .who span{display:none}
}