/* Listas nuevas (2026-11-02, JP): Playlists (propuesta C "Top") y My posts (propuesta C "Resultados"), con boton Lista / Cuadricula.
   Blanco editorial: Montserrat, #111, gris #6b6b73, lineas finas, 16px a los lados. Clases ml-*. */
.ml{--side:16px;--mut:#6b6b73;--line:#ececef;--soft:#f4f4f7;font-family:'Montserrat',sans-serif;color:#111;padding:0 var(--side) calc(120px + env(safe-area-inset-bottom));-webkit-font-smoothing:antialiased;text-align:left;max-width:100%;overflow-x:hidden}
.ml *{box-sizing:border-box}
.ml a{color:inherit;text-decoration:none !important}
.ml h1,.ml h2,.ml p{margin:0;padding:0}
.ml-top{display:flex;align-items:center;gap:12px;height:62px}
.ml-top h1{flex:1;min-width:0;font-size:22px !important;font-weight:700;letter-spacing:-.02em;line-height:1.2 !important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ml-back{width:40px;height:40px;margin-left:-10px;border-radius:50%;display:grid;place-items:center;flex:none}
.ml-back svg{width:24px;height:24px;fill:none;stroke:#111;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ml-lay{width:40px;height:40px;border-radius:50%;border:0;background:var(--soft);display:grid;place-items:center;cursor:pointer;flex:none;padding:0}
.ml-lay svg{width:20px;height:20px;fill:none;stroke:#111;stroke-width:1.9;stroke-linecap:round}
.ml-lay .i-list circle{fill:#111;stroke:none}
.ml[data-layout="list"] .ml-lay .i-list,.ml[data-layout="grid"] .ml-lay .i-grid{display:none}
.ml-lay:focus-visible,.ml-chip:focus-visible,.ml-it:focus-visible,.ml-hero:focus-visible{outline:2.5px solid #6a6cc6;outline-offset:2px}
.ml-new{flex:none;height:36px;padding:0 14px;border-radius:10px;background:#111;color:#fff !important;font-weight:600;font-size:13.5px;display:flex;align-items:center;gap:6px}

.ml-chips{display:flex;gap:8px;margin:2px calc(-1 * var(--side)) 14px;padding:0 var(--side);overflow-x:auto;scrollbar-width:none}
.ml-chips::-webkit-scrollbar{display:none}
.ml-chip{flex:none;height:36px;padding:0 15px;border-radius:99px;background:var(--soft);font-weight:600;font-size:13.5px;display:flex;align-items:center;color:#3d3d44 !important}
.ml-chip.on{background:#111;color:#fff !important}

/* la primera en grande (solo en lista) */
.ml-hero{display:block;position:relative;height:200px;border-radius:18px;overflow:hidden;background:var(--img,none) center/cover no-repeat,linear-gradient(135deg,#a0b3fc,#6a6cc6)}
.ml-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(0,0,0,.66))}
.ml-hero-tx{position:absolute;left:16px;right:16px;bottom:14px;z-index:1;color:#fff}
.ml-hero-tx small{display:block;font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#ececf3}
.ml-hero-tx b{display:block;font-size:23px;font-weight:700;letter-spacing:-.02em;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ml-hero-tx span{display:block;font-size:13.5px;opacity:.92;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ml[data-layout="grid"] .ml-hero{display:none}

/* lista numerada */
.ml-list{margin-top:6px}
.ml-it{display:flex;align-items:center;gap:12px;padding:9px 0}
.ml-n{flex:0 0 22px;text-align:center;font-weight:700;font-size:16px;color:var(--mut)}
.ml-cov{flex:none;width:56px;height:56px;border-radius:10px;object-fit:cover;background:linear-gradient(135deg,#a0b3fc,#6a6cc6)}
.ml-tx{flex:1;min-width:0}
.ml-tx b{display:block;font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ml-tx small{display:block;font-size:13px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.ml-tx .ml-st{display:flex;gap:12px;font-size:12px;margin-top:3px}
.ml[data-layout="list"] .ml-it.first{display:none}

/* cuadricula: 2 columnas con portada */
.ml[data-layout="grid"] .ml-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px;margin-top:2px}
.ml[data-layout="grid"] .ml-it{display:block;padding:0}
.ml[data-layout="grid"] .ml-n{display:none}
.ml[data-layout="grid"] .ml-cov{display:block;width:100%;height:auto;aspect-ratio:1;border-radius:12px}
.ml[data-layout="grid"] .ml-tx{margin-top:8px}
.ml[data-layout="grid"] .ml-tx b{font-size:14px}
.ml[data-layout="grid"] .ml-tx small{font-size:12.5px}

.ml-empty{margin:40px 0;text-align:center;color:var(--mut);font-size:14.5px}

/* My posts: resumen arriba */
.ml-sum{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--line);border-radius:14px;margin-top:2px}
.ml-sum div{padding:12px;border-left:1px solid var(--line);min-width:0}
.ml-sum div:first-child{border-left:0}
.ml-sum b{display:block;font-size:20px;font-weight:700;letter-spacing:-.02em}
.ml-sum span{font-size:12.5px;color:var(--mut);font-weight:500}
.ml-h2{display:flex;justify-content:space-between;align-items:center;margin:22px 0 8px}
.ml-h2 h2{font-size:17px !important;font-weight:700;letter-spacing:-.01em}
.ml-best{display:flex;gap:12px;align-items:center}
.ml-best img{width:104px;height:78px;border-radius:12px;object-fit:cover;flex:none;background:linear-gradient(135deg,#a0b3fc,#6a6cc6)}
.ml-best b{display:block;font-size:15.5px;font-weight:600;line-height:1.3}
.ml-best small{display:block;font-size:13px;color:var(--mut);margin-top:3px}
.ml[data-layout="grid"] .ml-best-sec{display:none}
.ml-more{flex:none;width:38px;height:38px;border:0;background:none;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:#6b6b73;font-size:20px;letter-spacing:1px;line-height:1}
.ml-more:focus-visible{outline:2.5px solid #6a6cc6}
.ml-p{position:relative}
.ml-p .ml-it{padding-right:40px}
.ml-p .ml-more{position:absolute;right:-6px;top:50%;transform:translateY(-50%)}
.ml[data-layout="grid"] .ml-p .ml-it{padding-right:0}
.ml[data-layout="grid"] .ml-p .ml-more{top:6px;right:6px;transform:none;background:rgba(255,255,255,.92);width:34px;height:34px}
.ml[data-layout="grid"] .ml-p .ml-cov{aspect-ratio:4/3}
.ml-menu{position:fixed;inset:0;z-index:2000;background:rgba(0,0,0,.35);display:flex;align-items:flex-end}
.ml-menu[hidden]{display:none}
.ml-menu-in{width:100%;background:#fff;border-radius:18px 18px 0 0;padding:10px 16px calc(18px + env(safe-area-inset-bottom));font-family:'Montserrat',sans-serif}
.ml-menu-in b{display:block;font-size:15px;font-weight:700;padding:10px 0 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ml-menu-in a,.ml-menu-in button{display:flex;align-items:center;width:100%;min-height:50px;border:0;border-top:1px solid #ececef;background:none;font:500 15.5px 'Montserrat',sans-serif;color:#111 !important;text-align:left;cursor:pointer;padding:0;text-decoration:none !important}
.ml-menu-in .del{color:#c0392b !important}

@media (min-width:768px){
    .ml{--side:50px;max-width:980px;margin:0 auto}
    .ml-hero{height:280px}
    .ml[data-layout="grid"] .ml-list{grid-template-columns:repeat(4,minmax(0,1fr))}
}
/* las hojas viejas de estas paginas ponen interlineado grande a b / small / span */
.ml-tx b,.ml-tx small,.ml-tx span,.ml-hero-tx b,.ml-hero-tx small,.ml-hero-tx span,.ml-best b,.ml-best small,.ml-sum b,.ml-sum span,.ml-chip{line-height:1.35 !important}
.ml-tx .ml-st{line-height:1.3 !important}
span.ml-cov{display:block}
.ml-best span.ml-cov,.ml-best > span:first-child{width:104px;height:78px;border-radius:12px;flex:none;background:linear-gradient(135deg,#a0b3fc,#6a6cc6)}
.ml-best .ml-bimg{width:104px;height:78px;border-radius:12px}
/* Audience del DJ (B) */
.au-all{border:0;background:none;color:#5a5cb8;font:600 13.5px 'Montserrat',sans-serif;cursor:pointer;padding:6px 0}
.au-row{display:flex;align-items:center;gap:12px;padding:8px 0}
.au-row[hidden]{display:none}
.au-av{width:48px;height:48px;border-radius:50%;flex:none;display:grid;place-items:center;background:#e9e9ee center/cover no-repeat;color:#111;font-weight:700;font-size:17px}
.au-view{flex:none;height:34px;padding:0 14px;border-radius:10px;background:#efeff4;font-weight:600;font-size:13.5px;display:flex;align-items:center;color:#111}
.au-c{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:14px;color:#6b6b73}
.au-c b{color:#111;font-weight:600}
/* Promote yourself (C) */
.pr-h{font-size:30px !important;font-weight:700;letter-spacing:-.025em;line-height:1.15 !important;margin-top:10px !important}
.pr-p{font-size:15px !important;line-height:1.6 !important;color:#4a4a52;margin-top:12px !important}
.pr-link{margin-top:18px;padding:12px 14px;border-radius:12px;background:#f4f4f7;font-size:13.5px;color:#4a4a52;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pr-btn{display:flex;align-items:center;justify-content:center;width:100%;height:48px;margin-top:10px;border:0;border-radius:12px;background:#111;color:#fff;font:600 15px 'Montserrat',sans-serif;cursor:pointer}
.pr-alt{display:flex;gap:8px;margin-top:8px}
.pr-alt a,.pr-alt button{flex:1;height:42px;border:0;border-radius:12px;background:#f1f1f5;color:#111 !important;font:600 13.5px 'Montserrat',sans-serif;display:flex;align-items:center;justify-content:center;cursor:pointer;text-decoration:none !important}
.pr-btn:focus-visible,.pr-alt a:focus-visible,.pr-alt button:focus-visible{outline:2.5px solid #6a6cc6;outline-offset:2px}
.pr-steps{list-style:none;margin:0;padding:0}
.pr-steps li{display:flex;gap:14px;padding:14px 0;border-top:1px solid #ececef}
.pr-steps li > span{flex:0 0 26px;font-weight:700;font-size:14px;line-height:1.4}
.pr-steps b{display:block;font-size:15.5px;font-weight:600;line-height:1.35 !important}
.pr-steps small{display:block;font-size:13.5px;color:#6b6b73;line-height:1.5 !important;margin-top:3px}
@media (min-width:768px){.pr{max-width:720px}.pr-h{font-size:40px !important}}
/* 2026-11-02 (JP): portadas con el mismo borde que la portada de /playlist/<id> en el telefono (4px; 12px en computadora, como ahi) */
.ml-hero,.ml-cov,span.ml-cov,.ml-best img,.ml-best .ml-bimg,.ml-best > span:first-child,.ml[data-layout="grid"] .ml-cov{border-radius:4px}
@media (min-width:768px){.ml-hero{border-radius:12px}}