/* ============================================================
   RESPONSIVE — en móvil el escritorio se vuelve pantalla de inicio
   ============================================================ */
@media (max-width:1100px){
  .widget{width:270px}
}

@media (max-width:860px){
  .pl{grid-template-columns:1fr}
  .queue{border-left:0;border-top:1px solid var(--line)}
}

@media (max-width:720px){
  .menubar{padding:0 16px}
  .mb-left button{display:none}

  /* Pantalla de inicio */
  .desktop{overflow-y:auto;overflow-x:hidden;padding:calc(var(--menu-h) + 14px) 16px 140px;-webkit-overflow-scrolling:touch}
  .widget{position:static;width:auto;margin-bottom:26px;border-radius:24px}
  .icons{position:static;display:grid;grid-template-columns:repeat(4,1fr);gap:22px 4px}
  .icon{position:static;width:auto;touch-action:manipulation}
  .lbl{font-size:11.5px;max-width:80px}
  .ico{width:60px;height:60px}
  .ico svg{width:60px}
  .planet{width:56px;height:56px}

  /* Dock tipo iOS */
  .dock{bottom:max(12px,env(safe-area-inset-bottom))}
  .dock-in{height:auto;gap:18px;padding:12px 16px;border-radius:28px}
  .dock-item{width:56px!important}
  .tip{display:none}
  .hint{bottom:112px}
  body.sheet-open .dock{transform:translate(-50%,160%)}

  /* Ventanas = hojas a pantalla completa */
  .windows{z-index:70}
  .win{
    inset:var(--menu-h) 0 0 0!important;width:auto!important;height:auto!important;
    border-radius:22px 22px 0 0;transform-origin:50% 100%!important;
  }
  .win.opening{animation:sheetIn .45s cubic-bezier(.2,.9,.25,1) both}
  .win.closing{animation:sheetOut .28s ease-in both}
  @keyframes sheetIn{from{transform:translateY(100%)}to{transform:none}}
  @keyframes sheetOut{to{transform:translateY(100%)}}

  .win-bar{height:52px;padding:0 14px}
  .win-bar .win-spacer{order:0;width:34px}
  .win-bar .win-title{order:1;font-size:15px}
  .win-bar .lights{order:2;width:34px;justify-content:flex-end}
  .light.min,.light.zoom{display:none}
  .light.close{width:30px;height:30px;background:rgba(255,255,255,.16)!important}
  .light.close svg{inset:8px;width:14px;height:14px;opacity:1;stroke:#fff;stroke-width:1.6}
  .win-body{padding-bottom:max(18px,env(safe-area-inset-bottom))}

  .pl-main{padding:20px 22px 22px}
  .art{width:min(62vw,260px)}
  .pl-ctrl{gap:30px}
  .queue{overflow:visible;padding:8px 12px 12px}
  .about{grid-template-columns:1fr;justify-items:center;text-align:center;padding:24px 22px}
  .ab-links{justify-content:center}
  .applist{padding:18px 14px 24px}
}

@media (max-width:360px){
  .icons{gap:18px 2px}
  .lbl{font-size:11px}
}

@media (max-height:620px) and (min-width:721px){
  .widget{display:none}
}

/* ---------- Hancock, Instagram y dock en móvil ---------- */
@media (max-width:860px){
  .hk-song{grid-template-columns:130px minmax(0,1fr);gap:20px}
  .hk-disc,.hk-disc .planet{width:130px;height:130px}
}
@media (max-width:720px){
  .d-desk{display:none}
  .dock-in{gap:16px}
  .mb-btn{display:none}
  .new{right:-10px}
  .hk{padding:22px 18px 28px}
  .hk-song{grid-template-columns:1fr;justify-items:center;text-align:center;gap:16px}
  .hk-disc,.hk-disc .planet{width:150px;height:150px}
  .hk-info .pl-prog{margin:0 auto}
  .hk-links,.hk-end{justify-content:center;align-items:center;text-align:center}
  .hk-end{width:100%}
  .hk-folders{grid-template-columns:repeat(3,minmax(0,1fr))}
  .g-view{inset:52px 0 0 0}
}
@media (max-width:420px){
  .hk-folders{grid-template-columns:repeat(2,minmax(0,1fr))}
}