/* NATTUBE · versión para PC y tablet (diseño tipo YouTube).
   Solo se aplica con html.desk (pantalla ≥768 px de ancho y ≥560 de alto, y no dentro de la app Android).
   El teléfono sigue con app.css tal cual. */

html.desk{--sbw:240px;--hh:56px;--mh:76px}
@media (max-width:1199px){html.desk{--sbw:84px}}

/* ───────── armazón: cabecera arriba, menú a la izquierda, contenido ───────── */
html.desk #app{max-width:none;margin:0;display:grid;grid-template-columns:var(--sbw) minmax(0,1fr);grid-template-rows:var(--hh) minmax(0,1fr)}
html.desk .top{grid-column:1/-1;grid-row:1;height:var(--hh);padding:0 16px 0 18px;gap:6px;border-bottom:1px solid var(--line);background:var(--bg);position:relative;z-index:50}
html.desk .logo{font-size:23px;cursor:pointer}
html.desk .top .sp{display:none}
html.desk #bMicTop{margin-left:auto}
html.desk .top .ib{width:42px;height:42px;border-radius:50%;transition:background .15s}
html.desk .top .ib:hover{background:var(--s2)}
html.desk #bAjustes .avatar{margin:0}

/* buscador central (como el de YouTube) */
html.desk .dsearch{display:flex;position:absolute;left:50%;top:8px;transform:translateX(-50%);width:min(640px,calc(100% - 520px));min-width:240px;height:40px;margin:0}
html.desk .dsearch .dbox{flex:1;display:flex;align-items:center;min-width:0;height:100%;border:1px solid var(--s3);border-right:0;border-radius:20px 0 0 20px;background:var(--bg);padding:0 6px 0 16px;transition:border-color .15s,box-shadow .15s}
html.desk .dsearch .dbox:focus-within{border-color:#3ea6ff;box-shadow:inset 0 0 0 1px #3ea6ff}
html.desk .dsearch input{flex:1;min-width:0;height:100%;background:none;border:0;outline:0;color:var(--tx);font:inherit;font-size:16px}
html.desk .dsearch input::placeholder{color:var(--tx3)}
html.desk .dsearch .dx{display:none;width:30px;height:30px;border-radius:50%;place-items:center;color:var(--tx2)}
html.desk .dsearch .dx.on{display:grid}html.desk .dsearch .dx:hover{background:var(--s2)}
html.desk .dsearch .dx svg{width:18px;height:18px}
html.desk .dsearch .dgo{width:64px;height:100%;border:1px solid var(--s3);border-radius:0 20px 20px 0;background:var(--s1);display:grid;place-items:center;color:var(--tx);transition:background .15s}
html.desk .dsearch .dgo:hover{background:var(--s2)}
html.desk .dsearch .dgo svg{width:24px;height:24px}

/* ───────── menú lateral ───────── */
html.desk #nav{position:static;grid-column:1;grid-row:2;height:auto;display:flex;flex-direction:column;gap:2px;padding:12px 12px 20px;border:0;background:var(--bg);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--s3) transparent;z-index:2}
html.desk #nav>button{flex:none;flex-direction:row;justify-content:flex-start;gap:22px;height:42px;padding:0 12px;border-radius:10px;font-size:14px;color:var(--tx);font-weight:400;transition:background .12s}
html.desk #nav>button:hover{background:var(--s2)}
html.desk #nav>button.on{background:var(--s2);font-weight:600}
html.desk #nav>button svg{width:24px;height:24px}
html.desk #nav .bd{position:static;margin-left:auto}
html.desk #nav .nx{display:block;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
html.desk #nav .nx b{display:block;padding:6px 12px 6px;font-size:16px;font-weight:600}
html.desk #nav .nx button{display:flex;flex:none;flex-direction:row;align-items:center;justify-content:flex-start;gap:22px;width:100%;height:42px;padding:0 12px;border-radius:10px;font-size:14px;font-weight:400;color:var(--tx);text-align:left;transition:background .12s}
html.desk #nav .nx button:hover{background:var(--s2)}
html.desk #nav .nx svg{width:24px;height:24px;flex:none}
html.desk #nav .nx small{display:block;padding:14px 12px 0;color:var(--tx3);font-size:12px;line-height:1.5}
@media (max-width:1199px){
  html.desk #nav{padding:8px 6px;align-items:stretch}
  html.desk #nav>button{flex-direction:column;justify-content:center;gap:4px;height:74px;padding:0;font-size:10.5px;border-radius:12px}
  html.desk #nav>button.on{font-weight:700}
  html.desk #nav .bd{position:absolute;top:8px;left:calc(50% + 6px);margin:0}
  html.desk #nav .nx{display:none}
}

/* ───────── contenido ───────── */
html.desk #views{grid-column:2;grid-row:2}
html.desk .view{padding:0 28px 32px;scrollbar-width:thin;scrollbar-color:var(--s3) transparent}
html.desk .view::-webkit-scrollbar{display:block;width:10px}
html.desk .view::-webkit-scrollbar-thumb{background:var(--s3);border-radius:8px;border:2px solid var(--bg)}
html.desk body.hay .view{padding-bottom:calc(var(--mh) + 28px)}
html.desk .chips{padding:12px 0 14px;gap:12px;top:0}
html.desk .chip{height:34px;padding:0 14px;border-radius:9px;font-size:14px;transition:background .15s}
html.desk .chip:not(.on):hover{background:var(--s3)}
html.desk .sec{margin:6px 0 26px}
html.desk .sec h2{padding:6px 0 14px;font-size:21px}
html.desk .sec h2 button:hover{background:var(--s2);color:var(--tx)}
html.desk .banner{margin:4px 0 20px;max-width:760px}

/* repisas horizontales (Seguir escuchando, favoritos…) */
html.desk .hrow{padding:0 0 6px;gap:18px}
html.desk .hcard{width:210px}
html.desk .hcard .thumb{border-radius:12px}
html.desk .hcard .tt{font-size:14.5px;margin-top:10px}

/* rejilla de videos del Inicio */
html.desk #feed .sec{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:30px 18px}
html.desk #feed .sec h2{grid-column:1/-1;padding-bottom:0}
html.desk .vcard{margin:0;animation:cardIn .4s cubic-bezier(.2,.8,.25,1) both}
html.desk .vcard .thumb{margin:0;border-radius:12px;box-shadow:none;transition:border-radius .2s,transform .25s,box-shadow .25s}
html.desk .vcard:hover .thumb{border-radius:0;box-shadow:0 10px 28px rgba(0,0,0,.4)}
html.desk .vcard .meta{padding:12px 0 0;gap:12px}
html.desk .vcard .tt{font-size:16px;font-weight:600;line-height:1.35}
html.desk .vcard .cc{font-size:13.5px}
html.desk .vcard .mm{opacity:0;transition:opacity .15s;margin:-6px -10px 0 0}
html.desk .vcard:hover .mm,html.desk .vcard .mm:focus-visible{opacity:1}
html.desk .vcard,html.desk .hcard,html.desk .row,html.desk .dl{cursor:pointer}
html.desk .thumb .pbtn{transition:transform .2s,opacity .2s;opacity:.0;width:64px;height:64px;margin:-32px 0 0 -32px}
html.desk .vcard:hover .thumb .pbtn,html.desk .hcard:hover .thumb .pbtn{opacity:1;transform:scale(1.06)}
html.desk .vcard .thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 55%,rgba(0,0,0,.35));opacity:0;transition:opacity .2s;pointer-events:none}
html.desk .vcard:hover .thumb::after{opacity:1}
html.desk .hcard .thumb{transition:transform .2s}
html.desk .hcard:hover .thumb{transform:translateY(-2px)}
html.desk .skc{margin:0 0 6px}

/* ───────── resultados de búsqueda (lista ancha como YouTube) ───────── */
html.desk #v-buscar .sbar{padding:0;position:sticky;top:0;background:var(--bg);z-index:6}
html.desk #v-buscar .sbar .sbox{display:none}
html.desk #v-buscar .sbar .chips{padding:12px 0 8px!important}
html.desk #resB{max-width:1080px;margin:0 auto 0 0}
html.desk #resB .vcard{display:flex;gap:18px;align-items:flex-start;margin:0 0 18px}
html.desk #resB .vcard .thumb{width:min(360px,38%);flex:none;border-radius:14px}
html.desk #resB .vcard .meta{flex:1;padding:0;min-width:0;position:relative}
html.desk #resB .vcard .av{display:none}
html.desk #resB .vcard .tt{font-size:19px;font-weight:500;-webkit-line-clamp:2}
html.desk #resB .vcard .cc{font-size:13px;margin-top:8px;white-space:normal}
html.desk #resB .vcard .mm{position:absolute;right:0;top:-8px}
html.desk .row{padding:8px 10px;border-radius:12px;transition:background .12s}
html.desk .row:hover{background:var(--s2)}
html.desk .row .thumb{width:168px}html.desk .row .thumb.sq{width:84px}
html.desk .row .tt{font-size:16px}
html.desk #resB .row{max-width:1080px}
html.desk .row .mm{opacity:0;transition:opacity .15s}html.desk .row:hover .mm{opacity:1}
html.desk .alts{padding:2px 0 12px}

/* sugerencias: lista flotante bajo el buscador */
html.desk #sug{display:none!important}
html.desk #dsug.abierto:not(:empty){display:block;position:fixed;top:50px;left:50%;transform:translateX(-50%);width:min(576px,calc(100% - 584px));min-width:216px;max-height:420px;overflow-y:auto;background:var(--s1);border-radius:16px;box-shadow:0 12px 40px rgba(0,0,0,.55);padding:8px 0;z-index:70}
html.desk .sug button:hover{background:var(--s2)}

/* Descargas / Tú */
html.desk #v-descargas>*,html.desk #v-tu>*{max-width:1040px}
html.desk .dl{padding:8px 10px;border-radius:12px}
html.desk .dl:hover{background:var(--s2)}
html.desk .dl .thumb{width:168px}html.desk .dl .thumb.sq{width:84px}
html.desk .dia{padding:18px 0 6px;font-size:17px}
html.desk .inst{max-width:820px;padding:6px 0 30px}
html.desk .vacio{padding:80px 28px}

/* ───────── reproductor mini: barra inferior ───────── */
html.desk #mini{position:fixed;left:0;right:0;bottom:0;width:auto;height:var(--mh);border-radius:0;padding:0 18px 0 18px;gap:14px;box-shadow:0 -6px 24px rgba(0,0,0,.35);border-top:1px solid var(--line);z-index:40}
html.desk #mini .thumb{width:96px;height:54px;border-radius:8px}
html.desk #mini .tt{font-size:15px}
html.desk #mini .ib{width:48px;height:48px;border-radius:50%;transition:background .15s}
html.desk #mini .ib:hover{background:var(--s2)}
html.desk #mini .ib svg{width:28px;height:28px}
html.desk #mini .pg{top:-1px;bottom:auto;height:3px}
html.desk #mini{cursor:pointer}

/* ───────── reproductor completo: página de video (video + cola) ───────── */
html.desk #player{top:var(--hh);max-width:none;margin:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,420px);grid-template-rows:auto auto auto auto auto minmax(0,1fr);column-gap:28px;padding:0 28px;overflow-y:auto;overflow-x:hidden;transform:translateY(14px);opacity:0;visibility:hidden;pointer-events:none;transition:transform .32s cubic-bezier(.2,.85,.25,1),opacity .25s,visibility 0s .32s}
html.desk #player.on{transform:none;opacity:1;visibility:visible;pointer-events:auto;transition:transform .32s cubic-bezier(.2,.85,.25,1),opacity .25s}
html.desk #player .pscroll{display:contents}
html.desk #player.fsv{padding:0;display:block;overflow:hidden}
html.desk #player.fsv .pscroll{display:none}
html.desk #player .pscroll>*{position:relative;z-index:1}
html.desk .ph{grid-column:1;grid-row:1;height:52px;padding:0}
html.desk #ytbox{grid-column:1;grid-row:2;width:min(100%,max(380px,calc((100vh - var(--hh) - 52px - 96px) * 1.7778)));margin:0;border-radius:16px;box-shadow:0 14px 40px rgba(0,0,0,.5)}
html.desk .pinfo{grid-column:1;grid-row:3;padding:16px 0 2px}
html.desk .pinfo h1{font-size:23px;line-height:1.3}
html.desk .pinfo p{font-size:15px;margin-top:6px}
html.desk .acts{grid-column:1;grid-row:4;padding:10px 0 4px;flex-wrap:wrap;overflow:visible}
html.desk .act{transition:background .15s}
html.desk .act:hover{background:rgba(255,255,255,.2)}
html.desk .seek{grid-column:1;grid-row:5;padding:8px 0 0}
html.desk .ctl{grid-column:1;grid-row:6;align-self:start;justify-content:flex-start;padding:6px 0 20px;gap:12px}
html.desk .ctl .ib{transition:background .15s}html.desk .ctl .ib:hover{background:rgba(255,255,255,.12)}
html.desk .ctl .play{transition:transform .15s}html.desk .ctl .play:hover{transform:scale(1.06)}
html.desk .ptabs{grid-column:2;grid-row:1;align-self:center;border-top:0;margin:0;padding:0}
html.desk #qlist,html.desk #lyrics{grid-column:2;grid-row:2/7;min-height:0;overflow-y:auto;margin-bottom:20px;border-radius:14px;scrollbar-width:thin;scrollbar-color:var(--s3) transparent}
html.desk #qlist .row{padding-left:6px}
html.desk #qlist .row .thumb{width:130px}
html.desk .ly{font-size:26px}
/* el botón de pantalla completa propio sube para no tapar la barra de controles de YouTube */
html.desk #ytbox .fsb{bottom:54px}
html.desk #ytbox .carga{display:none!important}

/* menús (hojas) como ventana flotante */
html.desk #velo{background:rgba(0,0,0,.5)}
html.desk #hoja{left:50%;right:auto;top:50%;bottom:auto;width:min(480px,calc(100% - 40px));max-height:min(80vh,720px);border-radius:18px;transform:translate(-50%,-47%) scale(.96);opacity:0;pointer-events:none;padding:10px 0 12px;box-shadow:0 24px 80px rgba(0,0,0,.6);transition:transform .22s cubic-bezier(.2,.85,.25,1),opacity .18s}
html.desk #hoja.on{transform:translate(-50%,-50%);opacity:1;pointer-events:auto}
html.desk #hoja .grip{display:none}
html.desk #hoja .op{transition:background .12s;cursor:pointer}
html.desk #hoja .op:hover{background:var(--s2)}
html.desk #toast{bottom:calc(var(--mh) + 20px)}

/* pantalla ancha: video más grande y más columnas */
@media (min-width:1700px){html.desk #feed .sec{grid-template-columns:repeat(auto-fill,minmax(340px,1fr))}html.desk .hcard{width:240px}}

/* tablet en vertical / ventana angosta: video arriba y la cola debajo */
@media (max-width:999px){
  html.desk #player{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-auto-rows:auto;column-gap:0;padding:0 22px}
  html.desk #player.fsv{padding:0}
  html.desk .ph,html.desk #ytbox,html.desk .pinfo,html.desk .acts,html.desk .seek,html.desk .ctl,html.desk .ptabs,html.desk #qlist,html.desk #lyrics{grid-column:1;grid-row:auto}
  html.desk #ytbox{width:auto;justify-self:stretch;align-self:start;aspect-ratio:auto;height:min(calc((100vw - 44px) * .5625),58vh)}
  html.desk .ctl{justify-content:center}
  html.desk .ptabs{align-self:start;padding:12px 0 8px;border-top:1px solid var(--line);margin-top:6px}
  html.desk #qlist,html.desk #lyrics{overflow:visible;margin-bottom:30px}
}