/* NATTUBE — estilo inspirado en YouTube / YouTube Music (modo oscuro #0F0F0F, superficies #272727, rojo #FF0000) */
:root{
  --bg:#0f0f0f;--s1:#181818;--s2:#272727;--s3:#3f3f3f;--tx:#f1f1f1;--tx2:#aaaaaa;--tx3:#717171;
  --red:#ff0000;--red2:#ff4e45;--chip:#272727;--chiptx:#f1f1f1;--chipon:#f1f1f1;--chiponx:#0f0f0f;--line:rgba(255,255,255,.1);
  --glass:rgba(24,24,24,.86);--acc:255,0,0;--sab:env(safe-area-inset-bottom,0px);--sat:env(safe-area-inset-top,0px);
  --navh:56px;--minih:64px;
  --font:Roboto,"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
}
:root[data-t="claro"]{--bg:#ffffff;--s1:#f7f7f7;--s2:#f0f0f0;--s3:#dcdcdc;--tx:#0f0f0f;--tx2:#606060;--tx3:#909090;--chip:#f0f0f0;--chiptx:#0f0f0f;--chipon:#0f0f0f;--chiponx:#fff;--line:rgba(0,0,0,.1);--glass:rgba(255,255,255,.9)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--tx);font-family:var(--font);font-size:14px;overflow:hidden;overscroll-behavior:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
button:active{transform:scale(.96)}
svg{display:block;fill:currentColor}
a{color:inherit}
#app{position:fixed;inset:0;display:flex;flex-direction:column;max-width:760px;margin:0 auto;background:var(--bg)}
@media (min-width:761px){#app{border-left:1px solid var(--line);border-right:1px solid var(--line)}}

/* ── barra superior ── */
.top{flex:none;display:flex;align-items:center;gap:4px;height:calc(54px + var(--sat));padding:var(--sat) 6px 0 14px;background:var(--bg);position:relative;z-index:5}
.logo{display:flex;align-items:center;gap:7px;font-weight:800;font-size:21px;letter-spacing:-1.1px}
.logo svg{width:34px;height:24px;fill:var(--red)}
.logo b{color:var(--tx)}.logo i{font-style:normal;color:var(--red)}
.top .sp{flex:1}
.ib{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:var(--tx)}
.ib:active{background:var(--s2)}
.ib svg{width:24px;height:24px}
.avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#ff2d20,#a30d06);display:grid;place-items:center;font-weight:800;font-size:15px;color:#fff;margin:0 6px 0 4px}

/* ── vistas ── */
#views{flex:1;position:relative;min-height:0}
.view{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;padding-bottom:calc(var(--navh) + var(--sab) + 20px);display:none;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.view::-webkit-scrollbar{display:none}
.view.on{display:block;animation:vin .28s cubic-bezier(.2,.8,.25,1) both}
body.hay .view{padding-bottom:calc(var(--navh) + var(--minih) + var(--sab) + 24px)}
@keyframes vin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ── chips ── */
.chips{display:flex;gap:8px;overflow-x:auto;padding:4px 14px 12px;scrollbar-width:none;position:sticky;top:0;z-index:4;background:var(--bg)}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;height:34px;padding:0 14px;border-radius:9px;background:var(--chip);color:var(--chiptx);font-weight:500;font-size:14px;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.chip.on{background:var(--chipon);color:var(--chiponx)}
.chip svg{width:18px;height:18px}

/* ── secciones y tarjetas ── */
.sec{margin:8px 0 18px}
.sec h2{margin:0;padding:6px 14px 10px;font-size:19px;font-weight:700;letter-spacing:-.2px;display:flex;align-items:center;justify-content:space-between}
.sec h2 button{font-size:13px;font-weight:600;color:var(--tx2);padding:4px 8px;border-radius:14px}
.hrow{display:flex;gap:12px;overflow-x:auto;padding:0 14px 4px;scrollbar-width:none;scroll-snap-type:x proximity}
.hrow::-webkit-scrollbar{display:none}
.hcard{flex:none;width:148px;scroll-snap-align:start;text-align:left}
.hcard.wide{width:230px}
.thumb{position:relative;width:100%;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:var(--s2)}
.thumb.sq{aspect-ratio:1/1}
.thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s}
.thumb img.ok{opacity:1}
.thumb.sq img{inset:0 auto auto 50%;height:100%;width:177.78%;max-width:none;transform:translateX(-50%)}
.row .thumb.sq .dur,.dl .thumb.sq .dur,#hoja .thumb .dur{display:none}
.thumb .dur{position:absolute;right:6px;bottom:6px;background:rgba(0,0,0,.82);color:#fff;font-size:12px;font-weight:500;padding:1px 5px;border-radius:5px}
.thumb .badge{position:absolute;left:6px;top:6px;background:rgba(0,0,0,.72);color:#fff;font-size:10.5px;font-weight:700;padding:2px 6px;border-radius:5px;letter-spacing:.4px}
.thumb .prog{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.3)}.thumb .prog i{display:block;height:100%;background:var(--red)}
.hcard .tt,.vcard .tt{margin-top:8px;font-weight:500;font-size:14px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hcard .cc,.vcard .cc{margin-top:2px;font-size:12.5px;color:var(--tx2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.vcard{display:block;width:100%;text-align:left;margin:0 0 20px}
.vcard .thumb{border-radius:0}
@media (min-width:600px){.vcard .thumb{border-radius:14px}}
.vcard .meta{display:flex;gap:11px;padding:11px 14px 0;align-items:flex-start}
.vcard .av{flex:none;width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--s3),var(--s2));display:grid;place-items:center;font-weight:700;font-size:14px;color:var(--tx)}
.vcard .tx{flex:1;min-width:0}
.vcard .tt{margin-top:0;font-size:15px}
.vcard .mm{flex:none;margin:-6px -8px 0 0}

/* filas compactas (listas) */
.row{display:flex;align-items:center;gap:12px;padding:6px 6px 6px 14px;width:100%;text-align:left}
.row:active{background:var(--s1)}
.row .thumb{width:112px;flex:none;border-radius:10px}
.row .thumb.sq{width:62px;border-radius:8px}
.row .tx{flex:1;min-width:0}
.row .tt{font-weight:500;font-size:14.5px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.row .cc{margin-top:3px;font-size:12.5px;color:var(--tx2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.row.sonando .tt{color:var(--red2)}
.row .mm{flex:none}
.eq{display:inline-flex;gap:2px;align-items:flex-end;height:12px;margin-right:6px;vertical-align:middle}
.eq i{width:3px;background:var(--red);border-radius:2px;animation:eq 0.9s ease-in-out infinite}
.eq i:nth-child(2){animation-delay:.2s}.eq i:nth-child(3){animation-delay:.4s}
@keyframes eq{0%,100%{height:3px}50%{height:12px}}
.dia{padding:14px 14px 4px;font-size:15px;font-weight:700}

/* esqueleto de carga */
.sk{background:linear-gradient(90deg,var(--s2) 25%,var(--s3) 37%,var(--s2) 63%);background-size:400% 100%;animation:sk 1.3s ease infinite;border-radius:12px}
@keyframes sk{0%{background-position:100% 50%}100%{background-position:0 50%}}
.skc{margin:0 14px 22px}.skc .sk:first-child{aspect-ratio:16/9}.skc .sk:nth-child(2){height:14px;margin-top:12px;width:80%}.skc .sk:nth-child(3){height:12px;margin-top:8px;width:50%}

/* vacío */
.vacio{display:grid;place-items:center;text-align:center;padding:48px 28px;color:var(--tx2);gap:6px}
.vacio .gr{width:84px;height:84px;border-radius:50%;background:var(--s2);display:grid;place-items:center;color:var(--tx2);margin-bottom:10px}
.vacio .gr svg{width:40px;height:40px}
.vacio h3{margin:0;font-size:18px;color:var(--tx)}.vacio p{margin:0;max-width:300px;line-height:1.45}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 20px;border-radius:20px;background:var(--tx);color:var(--bg)!important;font-weight:600;margin-top:12px;text-decoration:none;white-space:nowrap}
.btn svg,.banner svg{width:22px;height:22px;flex:none}
.btn.rojo{background:var(--red);color:#fff}

/* ── buscar ── */
.sbar{position:sticky;top:0;z-index:6;background:var(--bg);padding:2px 12px 8px}
.sbox{display:flex;align-items:center;gap:6px;height:44px;border-radius:22px;background:var(--s2);padding:0 6px 0 14px}
.sbox svg{width:22px;height:22px;color:var(--tx2);flex:none}
.sbox input{flex:1;min-width:0;height:100%;background:none;border:0;outline:0;color:var(--tx);font:inherit;font-size:16px}
.sbox input::placeholder{color:var(--tx3)}
.sbox .x{width:34px;height:34px;display:none;place-items:center;border-radius:50%}.sbox .x.on{display:grid}
.sug{background:var(--bg)}
.sug button{display:flex;align-items:center;gap:14px;width:100%;padding:12px 16px;text-align:left;font-size:15px}
.sug button:active{background:var(--s1)}.sug svg{width:20px;height:20px;color:var(--tx2);flex:none}.sug span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── descargas ── */
.dl{display:flex;align-items:center;gap:12px;padding:8px 6px 8px 14px}
.dl .thumb{width:104px;flex:none;border-radius:10px}.dl .thumb.sq{width:64px}
.dl .tx{flex:1;min-width:0}
.dl .tt{font-weight:500;font-size:14.5px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dl .cc{margin-top:3px;font-size:12.5px;color:var(--tx2)}
.dl .cc.err{color:#ff7a70}
.dl .bar{height:4px;border-radius:2px;background:var(--s3);margin-top:8px;overflow:hidden}.dl .bar i{display:block;height:100%;background:var(--red);transition:width .4s}
.dl .bar.ind i{width:40%!important;animation:ind 1.1s ease-in-out infinite}
@keyframes ind{0%{margin-left:-40%}100%{margin-left:100%}}
.dl.listo{cursor:pointer}.dl.listo:active{background:var(--s1)}
.kpi{display:flex;gap:10px;padding:4px 14px 12px}
.kpi div{flex:1;background:var(--s1);border-radius:14px;padding:10px 12px}.kpi b{display:block;font-size:20px}.kpi span{color:var(--tx2);font-size:12px}
.banner{margin:6px 14px 14px;color:#fff!important;padding:14px;border-radius:16px;background:linear-gradient(135deg,#ff2d20,#b3100a);color:#fff;display:flex;align-items:center;gap:12px;text-decoration:none}
.banner b{display:block;font-size:15px}.banner small{opacity:.9}.banner .go{margin-left:auto;background:#fff;color:#b3100a;font-weight:800;padding:9px 16px;border-radius:20px;white-space:nowrap}

/* ── Tú (biblioteca) ── */
.seg{display:flex;gap:8px;padding:2px 14px 10px;overflow-x:auto;scrollbar-width:none}.seg::-webkit-scrollbar{display:none}
.item-set{display:flex;align-items:center;gap:14px;width:100%;padding:13px 16px;text-align:left;font-size:15px}
.item-set:active{background:var(--s1)}.item-set svg{width:24px;height:24px;color:var(--tx2)}.item-set small{display:block;color:var(--tx2);font-size:12px;margin-top:1px}

/* ── navegación inferior ── */
.nav{position:absolute;left:0;right:0;bottom:0;height:calc(var(--navh) + var(--sab));padding-bottom:var(--sab);display:flex;background:var(--bg);border-top:1px solid var(--line);z-index:30}
.nav button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:10.5px;color:var(--tx2);position:relative;font-weight:500}
.nav button svg{width:25px;height:25px}
.nav button.on{color:var(--tx);font-weight:700}
.nav button.on svg .o{display:none}.nav button:not(.on) svg .f{display:none}
.nav .bd{position:absolute;top:5px;left:calc(50% + 6px);min-width:17px;height:17px;border-radius:9px;background:var(--red);color:#fff;font-size:10.5px;font-weight:700;display:none;place-items:center;padding:0 4px}
.nav .bd.on{display:grid}

/* ── mini reproductor ── */
#mini{position:absolute;left:8px;right:8px;bottom:calc(var(--navh) + var(--sab) + 8px);height:var(--minih);border-radius:14px;background:var(--glass);backdrop-filter:blur(22px) saturate(1.6);-webkit-backdrop-filter:blur(22px) saturate(1.6);box-shadow:0 8px 28px rgba(0,0,0,.45),inset 0 0 0 1px var(--line);display:none;align-items:center;gap:10px;padding:0 6px 0 8px;z-index:25;overflow:hidden;cursor:pointer}
body.hay #mini{display:flex;animation:minin .35s cubic-bezier(.2,.9,.25,1) both}
@keyframes minin{from{transform:translateY(30px);opacity:0}to{transform:none;opacity:1}}
#mini .thumb{width:46px;height:46px;aspect-ratio:auto;border-radius:9px;flex:none}
#mini .tx{flex:1;min-width:0}#mini .tt{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#mini .cc{font-size:12px;color:var(--tx2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
#mini .ib{width:44px;height:44px}
#mini .pg{position:absolute;left:0;right:0;bottom:0;height:2.5px;background:rgba(255,255,255,.18)}#mini .pg i{display:block;height:100%;width:0;background:var(--red)}

/* ── reproductor completo ── */
#player{position:fixed;inset:0;max-width:760px;margin:0 auto;z-index:60;background:var(--bg);display:flex;flex-direction:column;transform:translateY(102%);transition:transform .42s cubic-bezier(.2,.85,.25,1);will-change:transform;overflow:hidden}
#player.on{transform:none}
#player .fondo{position:absolute;inset:0;background:radial-gradient(120% 60% at 50% 0%,rgba(var(--acc),.55),transparent 70%),var(--bg);transition:background .8s;z-index:0}
#player>*:not(.fondo){position:relative;z-index:1}
.ph{flex:none;display:flex;align-items:center;height:calc(52px + var(--sat));padding:var(--sat) 4px 0}
.ph .ttl{flex:1;text-align:center;font-weight:600;font-size:13px;letter-spacing:.3px;color:var(--tx2);text-transform:uppercase}
#ytbox{flex:none;position:relative;width:100%;aspect-ratio:16/9;background:#000;overflow:hidden}
#ytbox iframe,#ytbox #yt{position:absolute;inset:0;width:100%;height:100%;border:0}
#lv{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;display:none}
#ytbox.local #lv{display:block}#ytbox.local #yt{visibility:hidden}
#ytbox .carga{position:absolute;inset:0;display:none;place-items:center;background:rgba(0,0,0,.35);pointer-events:none}
#ytbox .carga.on{display:grid}
.spin{width:38px;height:38px;border-radius:50%;border:4px solid rgba(255,255,255,.25);border-top-color:#fff;animation:giro .8s linear infinite}@keyframes giro{to{transform:rotate(360deg)}}
.pscroll{flex:1;min-height:0;overflow-y:auto;scrollbar-width:none}.pscroll::-webkit-scrollbar{display:none}
.pinfo{padding:16px 18px 6px}
.pinfo h1{margin:0;font-size:19px;line-height:1.3;font-weight:700;letter-spacing:-.2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pinfo p{margin:4px 0 0;color:var(--tx2);font-size:14px}
.acts{display:flex;gap:8px;padding:10px 14px 4px;overflow-x:auto;scrollbar-width:none}.acts::-webkit-scrollbar{display:none}
.act{flex:none;display:flex;align-items:center;gap:7px;height:36px;padding:0 14px;border-radius:18px;background:rgba(255,255,255,.1);font-weight:600;font-size:13.5px}
:root[data-t="claro"] .act{background:rgba(0,0,0,.07)}
.act svg{width:20px;height:20px}.act.on{background:var(--tx);color:var(--bg)}
.seek{padding:10px 20px 0}
.seek input{width:100%;height:24px;margin:0;-webkit-appearance:none;appearance:none;background:transparent;--p:0%}
.seek input::-webkit-slider-runnable-track{height:5px;border-radius:3px;background:linear-gradient(90deg,var(--red) var(--p),rgba(255,255,255,.22) var(--p))}
.seek input::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;border-radius:50%;background:var(--red);margin-top:-5px;box-shadow:0 0 0 4px rgba(255,0,0,.25)}
.seek .tm{display:flex;justify-content:space-between;font-size:12px;color:var(--tx2);margin-top:-2px}
.ctl{display:flex;align-items:center;justify-content:center;gap:10px;padding:8px 14px 6px}
.ctl .ib{width:50px;height:50px}.ctl .ib svg{width:28px;height:28px}
.ctl .play{width:68px;height:68px;border-radius:50%;background:var(--tx);color:var(--bg);display:grid;place-items:center}.ctl .play svg{width:34px;height:34px}
.ctl .ib.on{color:var(--red2)}
.ptabs{display:flex;gap:6px;padding:12px 14px 4px;border-top:1px solid var(--line);margin-top:8px}
.ptab{height:34px;padding:0 16px;border-radius:17px;font-weight:600;font-size:13.5px;color:var(--tx2)}.ptab.on{background:var(--tx);color:var(--bg)}
#qlist .row{padding-left:10px}
.ly{padding:10px 20px 40px;font-size:22px;font-weight:700;line-height:1.4;letter-spacing:-.3px}
.ly p{margin:0 0 14px;color:var(--tx3);transition:color .25s,transform .25s;transform-origin:left}
.ly p.sync{cursor:pointer}.ly p.on{color:var(--tx);transform:scale(1.03)}
.ly .nota{font-size:13px;font-weight:400;color:var(--tx2)}

/* ── hojas (menús) ── */
#velo{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:80;opacity:0;pointer-events:none;transition:opacity .25s}
#velo.on{opacity:1;pointer-events:auto}
#hoja{position:fixed;left:0;right:0;bottom:0;max-width:760px;margin:0 auto;z-index:90;background:var(--s1);border-radius:22px 22px 0 0;transform:translateY(105%);transition:transform .34s cubic-bezier(.2,.85,.25,1);padding:8px 0 calc(14px + var(--sab));max-height:82vh;overflow-y:auto}
#hoja.on{transform:none}
#hoja .grip{width:38px;height:4px;border-radius:2px;background:var(--s3);margin:2px auto 10px}
#hoja .cab{display:flex;align-items:center;gap:12px;padding:4px 18px 12px;border-bottom:1px solid var(--line);margin-bottom:4px}
#hoja .cab .thumb{width:84px;flex:none;border-radius:8px}#hoja .cab .thumb.sq{width:52px}
#hoja .cab .tt{font-weight:600;font-size:14.5px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#hoja .cab .cc{color:var(--tx2);font-size:12.5px;margin-top:2px}
#hoja .op{display:flex;align-items:center;gap:16px;width:100%;padding:13px 20px;text-align:left;font-size:15px}
#hoja .op:active{background:var(--s2)}#hoja .op svg{width:24px;height:24px;color:var(--tx2);flex:none}
#hoja .op small{display:block;color:var(--tx2);font-size:12px;margin-top:1px}
#hoja .op.peli{color:#ff7a70}#hoja .op.peli svg{color:#ff7a70}
#hoja h3{margin:6px 20px 8px;font-size:17px}
#toast{position:fixed;left:50%;bottom:calc(var(--navh) + var(--minih) + var(--sab) + 26px);transform:translate(-50%,20px);background:var(--tx);color:var(--bg);padding:11px 18px;border-radius:12px;font-weight:500;font-size:14px;z-index:120;opacity:0;pointer-events:none;transition:.3s;max-width:88vw;text-align:center}
#toast.on{opacity:1;transform:translate(-50%,0)}
.sw{margin-left:auto;width:42px;height:24px;border-radius:12px;background:var(--s3);position:relative;flex:none}.sw::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:.2s}.sw.on{background:var(--red)}.sw.on::after{left:21px}

/* ── reproductor nativo: portada nítida al centro sobre su propio fondo difuminado (como YouTube Music) ── */
#natArt{position:absolute;inset:0;display:none;background:#000;overflow:hidden}
#natArt::before,#natArt::after{content:"";position:absolute;background-image:var(--art,none);background-position:center;background-repeat:no-repeat}
#natArt::before{inset:-30px;background-size:cover;filter:blur(26px) brightness(.55)}
#natArt::after{inset:0;background-size:contain}
#ytbox.nat #natArt{display:block}#ytbox.nat #yt,#ytbox.nat #lv{display:none}
.prem{display:none;font-style:normal;font-size:9.5px;font-weight:800;letter-spacing:1.4px;color:#2a1b00;background:linear-gradient(135deg,#ffe08a,#d9a21b);padding:2px 6px;border-radius:5px;margin-left:2px;align-self:flex-start;margin-top:5px}


/* ── círculos de progreso (para que nadie piense que se colgó) ── */
.ring{width:26px;height:26px;animation:giro 1.6s linear infinite;color:currentColor}
.ring circle{fill:none;stroke:currentColor;stroke-width:4;stroke-linecap:round;stroke-dasharray:90 150;animation:dash 1.5s ease-in-out infinite}
@keyframes dash{0%{stroke-dasharray:1 150;stroke-dashoffset:0}50%{stroke-dasharray:90 150;stroke-dashoffset:-35}100%{stroke-dasharray:90 150;stroke-dashoffset:-124}}
#miniPlay .ring{width:28px;height:28px}
.ctl .play .ring{width:38px;height:38px}
#ytbox .carga{flex-direction:column;gap:12px;background:rgba(0,0,0,.45)}
#ytbox .carga.on{display:flex;align-items:center;justify-content:center}
#ytbox .carga .ring{width:54px;height:54px;color:#fff}
#ytbox .carga #pCargaT{color:#fff;font-weight:600;font-size:14px;text-shadow:0 1px 6px rgba(0,0,0,.7);text-align:center;padding:0 24px}
/* la tarjeta que se está abriendo: velo y círculo sobre su miniatura */
.cargando-it .thumb::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.55);z-index:2}
.cargando-it .thumb::after{content:"";position:absolute;left:50%;top:50%;width:38px;height:38px;margin:-19px 0 0 -19px;border:4px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:giro .8s linear infinite;z-index:3}
#mini.cargando .thumb{position:relative}
#mini.cargando .thumb::after{content:"";position:absolute;left:50%;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;border:3px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:giro .8s linear infinite;z-index:3}
#mini.cargando .thumb::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.5);z-index:2}
/* descargas: círculo con porcentaje sobre la miniatura */
.dl .thumb{position:relative}
.pr{position:absolute;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.6);color:#fff;z-index:2}
.pr svg{width:46px;height:46px;position:absolute}
.pr svg.ring{width:36px;height:36px}
.pr svg circle.bg{fill:none;stroke:rgba(255,255,255,.28);stroke-width:3;animation:none;stroke-dasharray:none}
.pr svg circle.fg{fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;animation:none;transform:rotate(-90deg);transform-origin:50% 50%;transition:stroke-dasharray .4s}
.pr svg:not(.ring){animation:none}
.pr b{position:relative;font-size:11.5px;font-weight:700}
/* pregunta audio / video */
#hoja .op.dest{background:rgba(255,0,0,.12)}#hoja .op.dest span{font-weight:700}#hoja .op.dest svg{color:var(--red2)}
.otra{text-align:center;margin:-6px 14px 12px;font-size:12px;color:var(--tx3)}.otra a{text-decoration:underline;color:var(--tx2)}
/* con el reproductor de YouTube, "solo audio" esconde el video y muestra la portada */
#ytbox.soloaudio #natArt{display:block}
#ytbox.soloaudio #yt{opacity:0;pointer-events:none}
html.premium .prem{display:inline-block}

/* ── pantalla «Instala NATTUBE» (navegador): dos versiones y sus diferencias ── */
.inst{padding:6px 14px 20px}
.inst-t{margin:8px 0 4px;font-size:21px;letter-spacing:-.3px}.inst-s{margin:0 0 14px;color:var(--tx2);line-height:1.45;font-size:14px}
.ed{border-radius:20px;padding:16px;margin:0 0 14px;background:var(--s1);border:1px solid var(--line)}
.ed.premium{background:linear-gradient(160deg,rgba(255,0,0,.16),var(--s1) 55%);border-color:rgba(255,60,50,.45)}
.ed-h{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ed-n{font-weight:800;font-size:18px;letter-spacing:-.4px}.ed-n em{font-style:normal;font-size:10px;letter-spacing:1.4px;color:#2a1b00;background:linear-gradient(135deg,#ffe08a,#d9a21b);padding:2px 6px;border-radius:5px;vertical-align:middle;margin-left:4px}
.ed-n em.y{background:var(--s3);color:var(--tx)}
.ed-tag{font-size:11px;font-weight:700;color:#fff;background:var(--red);padding:3px 9px;border-radius:10px}.ed-tag.g{background:var(--s3)}
.ed-d{margin:8px 0 6px;color:var(--tx2);font-size:13.5px;line-height:1.4}
.ed ul,.ed-nota ul{list-style:none;margin:6px 0 12px;padding:0}
.ed li,.ed-nota li{position:relative;padding:5px 0 5px 26px;font-size:14px;line-height:1.38}
.ed li.si::before{content:"✓";position:absolute;left:2px;top:4px;color:#3ddc84;font-weight:800}
.ed li.no::before{content:"!";position:absolute;left:2px;top:5px;width:16px;height:16px;border-radius:50%;background:#f5a623;color:#201400;font-weight:800;font-size:11px;text-align:center;line-height:16px}
.ed-nota li::before{content:"•";position:absolute;left:8px;top:5px;color:var(--tx2)}
.ed-b{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:14px;background:var(--s3);color:var(--tx)!important;text-decoration:none;font-weight:700;font-size:15px}
.ed-b.rojo{background:var(--red);color:#fff!important;box-shadow:0 8px 22px rgba(255,0,0,.3)}
.ed-b svg{width:24px;height:24px;flex:none}.ed-b small{display:block;font-weight:400;font-size:12px;opacity:.85;margin-top:1px}
.ed-nota{border-radius:16px;padding:14px 16px;margin:0 0 14px;background:var(--s1)}.ed-nota p{margin:0;color:var(--tx2);font-size:12.5px;line-height:1.45}

/* ── interruptor Audio | Video (arriba del reproductor) ── */
.ph .modo{display:flex;margin:0 auto;padding:3px;border-radius:22px;background:rgba(255,255,255,.14)}
:root[data-t="claro"] .ph .modo{background:rgba(0,0,0,.08)}
.modo button{display:inline-flex;align-items:center;gap:6px;padding:8px 18px;border-radius:19px;font-weight:700;font-size:13.5px;color:var(--tx2);transition:background .2s,color .2s}
.modo button svg{width:17px;height:17px}
.modo button.on{background:var(--tx);color:var(--bg)}
.modo button:disabled{opacity:.35}
/* capa de video HD sincronizada con el audio nativo */
#ytbox.nat.vok #natArt{display:none}
#ytbox.nat.vok #lv{display:block}
#ytbox .vspin{position:absolute;left:10px;bottom:10px;display:none;align-items:center;gap:8px;background:rgba(0,0,0,.62);color:#fff;padding:6px 12px 6px 8px;border-radius:16px;font-size:12.5px;font-weight:600;z-index:4}
#ytbox.vid:not(.vok) .vspin{display:flex}
.vspin .ring{width:18px;height:18px}
#ytbox.local.soloaudio #lv{opacity:0}
/* pantalla completa */
#ytbox .fsb{position:absolute;right:8px;bottom:8px;width:38px;height:38px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;display:none;place-items:center;z-index:5}
#ytbox .fsb svg{width:22px;height:22px}
#ytbox.vok .fsb,#ytbox:not(.nat):not(.soloaudio):not(.local) .fsb,#ytbox.local:not(.soloaudio) .fsb{display:grid}
#ytbox .fsbar{display:none}
#player.fsv .ph,#player.fsv .pscroll{display:none}
#player.fsv #ytbox{position:fixed!important;inset:0;width:100%;height:100%;aspect-ratio:auto;z-index:10}
#player.fsv #ytbox .fsb{display:none!important}
#player.fsv #ytbox .fsbar{display:flex;position:absolute;left:0;right:0;bottom:0;align-items:center;gap:10px;padding:26px 14px calc(10px + var(--sab));background:linear-gradient(transparent,rgba(0,0,0,.85));color:#fff;opacity:0;pointer-events:none;transition:opacity .25s;z-index:6;font-size:12.5px}
#player.fsv #ytbox .fsbar.ver{opacity:1;pointer-events:auto}
.fsbar .ib{color:#fff}
.fsbar input[type=range]{flex:1;height:24px;margin:0;-webkit-appearance:none;appearance:none;background:transparent;--p:0%}
.fsbar input::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(90deg,var(--red) var(--p),rgba(255,255,255,.3) var(--p))}
.fsbar input::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--red);margin-top:-5px}
/* micrófono */
.sbox .mic{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--s3);color:var(--tx)}
.sbox .mic svg{width:21px;height:21px;color:var(--tx)}
.top .ib svg{width:24px;height:24px}

.ed-alt{display:block;margin:10px 4px 0;text-align:center;font-size:12px;color:var(--tx3);text-decoration:underline}

/* ── esquinas redondeadas en las imágenes de los videos y acabado fino ── */
.vcard .thumb{border-radius:18px;margin:0 12px;width:auto;box-shadow:0 6px 18px rgba(0,0,0,.28)}
@media (min-width:600px){.vcard .thumb{border-radius:18px}}
.vcard .meta{padding:12px 20px 0 22px}
.hcard .thumb{border-radius:16px}
.row .thumb{border-radius:14px}
.row .thumb.sq{border-radius:12px}
.dl .thumb{border-radius:14px}.dl .thumb.sq{border-radius:12px}
#hoja .cab .thumb{border-radius:12px}
#mini .thumb{border-radius:12px}
.thumb .dur{border-radius:7px;padding:2px 6px}
.thumb .badge{border-radius:7px}
#ytbox{width:calc(100% - 24px);margin:4px 12px 0;border-radius:20px;box-shadow:0 10px 30px rgba(0,0,0,.45)}
#player.fsv #ytbox{margin:0;border-radius:0;box-shadow:none;width:100%}
.chip{border-radius:12px}
.sbox{box-shadow:inset 0 0 0 1px var(--line)}
.vcard,.hcard{animation:cardIn .45s cubic-bezier(.2,.8,.25,1) both}
@keyframes cardIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.vcard:active .thumb,.hcard:active .thumb{transform:scale(.985);transition:transform .12s}
.thumb{transition:transform .2s}
/* micrófono: pulso mientras escucha */
.oyendo{position:relative;color:var(--red2)!important}
.oyendo::after{content:"";position:absolute;inset:2px;border-radius:50%;border:2px solid var(--red);animation:pulso 1.1s ease-out infinite}
@keyframes pulso{0%{transform:scale(.8);opacity:.9}100%{transform:scale(1.6);opacity:0}}
.alts{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:2px 14px 12px}
.alts span{font-size:12.5px;color:var(--tx2);font-weight:600;width:100%}
@media (prefers-reduced-motion:reduce){.vcard,.hcard{animation:none}.oyendo::after{animation:none}}
/* 4. la rueda sin fondo rojo */
#bAjustes .avatar{background:none;box-shadow:none;margin:0;width:42px;height:42px;color:var(--tx)}
#bAjustes .avatar svg{width:24px;height:24px;fill:currentColor}
/* 3. botón de play solo contorno sobre la imagen (Inicio) */
.thumb .pbtn{position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px 0 0 -29px;z-index:1;pointer-events:none;filter:drop-shadow(0 1px 5px rgba(0,0,0,.55))}
.thumb .pbtn svg{width:100%;height:100%;fill:none;stroke:#fff;stroke-width:3;stroke-linejoin:round;stroke-linecap:round}
.cargando-it .thumb .pbtn{display:none}
/* 2. un solo círculo al cargar el video: se quita el de la app sobre el recuadro (queda el texto y el del botón) */
#ytbox .carga .ring{display:none}
/* PC / tablet: elementos que solo se ven con desk.css */
.dsearch,#nav .nx,#dsug{display:none}