/* Butler: biblioteca musical oscura, portadas protagonistas y navegación móvil. */
:root{--bg:#030303;--bg2:#0c0c0c;--bg3:#202020;--bg4:#303030;--bg5:#454545;--text:#fff;--muted:#aaa;--green:#ff5252;--green2:#ff7676;--font-display:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;--sidebar-w:224px;--radius:6px;--player-h:88px}
body{font-family:var(--font-display);font-size:14px;letter-spacing:.1px}
button,input,textarea,select{font-family:inherit}
button:focus-visible,[tabindex]:focus-visible,input:focus-visible{outline:2px solid #fff;outline-offset:4px}
#body{padding:0;gap:0}
#sidebar{border-radius:0;background:#030303;border-right:1px solid #242424}
.sidebar-logo{padding:25px 22px 24px;font-size:23px;letter-spacing:-1px}
.sidebar-logo span{color:#fff}
.sidebar-logo .butler-mark{filter:grayscale(1) brightness(2)}
.sidebar-section{padding:0 12px 14px}
.nav-btn{padding:14px 16px;border-radius:8px;font-size:14px;font-weight:500;gap:18px}
.nav-btn.active{background:#242424;color:#fff}
.lib-header{border-top:1px solid #262626;margin-top:6px;padding-top:22px}
.pl-item{border-radius:6px;margin:2px 0;padding:10px 12px}
.pl-thumb{border-radius:4px}
.shared-badge{background:#292929;color:#bdbdbd}
#main{background:#030303;border-radius:0}
#topbar{height:68px;min-height:68px;background:#030303;border-bottom:1px solid #191919;padding:0 36px}
.nav-arrow{background:transparent;border:1px solid #343434;color:#fff}
#user-menu-btn{background:#222;padding:5px 12px 5px 5px;font-weight:500}
#user-avatar{background:#36454c;color:#fff}
#user-dropdown{background:#242424;border:1px solid #383838;border-radius:12px}
.view{padding:28px 40px 110px;max-width:1800px;margin:auto}
.view-hero{padding:36px 40px;min-height:250px;background:linear-gradient(180deg,#202025 0%,#030303 100%);gap:28px}
.view-hero-art{width:190px;height:190px;border-radius:8px}
.view-hero-info h1{font-size:clamp(26px,3.5vw,48px);letter-spacing:-1.5px;line-height:1.08}
.view-hero-info p.sub{margin-top:12px;line-height:1.6}
.hero-actions,.sort-bar{padding-left:40px;padding-right:40px}
.play-all-btn,.card-play,.btn-green{background:#fff;color:#030303}
.play-all-btn:hover,.card-play:hover,.btn-green:hover{background:#d9d9d9}
.song-card{background:transparent;padding:0;border-radius:0}
.song-card:hover{background:transparent}
.card-art{border-radius:7px;margin-bottom:12px;transition:filter .15s}
.song-card:hover .card-art{filter:brightness(.85)}
.card-title{font-family:var(--font-display);font-size:15px;font-weight:650;line-height:1.45}
.card-sub{font-size:13px;line-height:1.6}
.card-badge{color:#aaa}
.card-grid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:26px 20px}
.music-home{padding-top:24px}
.music-chips{display:flex;gap:9px;overflow:auto;padding:2px 2px 16px;scrollbar-width:none}
.music-chips::-webkit-scrollbar{display:none}
.music-chip{border:1px solid #333;border-radius:8px;background:#202020;color:#eee;font-size:14px;padding:9px 16px;white-space:nowrap;cursor:pointer}
.music-chip:hover{background:#343434}
.music-chip.active{background:#fff;color:#000;border-color:#fff}
.music-welcome{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 0 30px}
.music-eyebrow{font-size:14px;color:#aaa;margin-bottom:8px}
.music-welcome h1{font-size:clamp(32px,4vw,48px);font-weight:800;letter-spacing:-1.8px;line-height:1.1}
.music-search-action{display:flex;gap:12px;align-items:center;background:#202020;border:1px solid #383838;color:#aaa;padding:13px 20px;border-radius:10px;min-width:260px;text-align:left;cursor:pointer;font-size:15px}
.music-search-action:hover{background:#292929;color:#fff}
.music-section{margin-bottom:38px;min-width:0}
.music-section-heading{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:20px}
.music-section-heading h2{font-size:clamp(22px,2.2vw,30px);letter-spacing:-.7px;font-weight:750}
.music-section-heading .ghost-btn{border:1px solid #444;padding:8px 15px;border-radius:24px;color:#ddd;font-size:12px;white-space:nowrap}
.music-shelf{display:grid;grid-auto-flow:column;grid-auto-columns:190px;gap:22px;overflow-x:auto;padding:3px 2px 16px;scroll-snap-type:x proximity;scrollbar-width:thin}
.music-playlist{display:flex;flex-direction:column;align-items:stretch;gap:5px;min-width:0;max-width:100%;background:none;border:none;color:white;text-align:left;cursor:pointer;scroll-snap-align:start}
.music-playlist-art{display:block;position:relative;aspect-ratio:1;border-radius:7px;overflow:hidden;margin-bottom:8px;background:linear-gradient(145deg,#315c79,#101a2d)}
.music-playlist:nth-child(4n+2) .music-playlist-art{background:linear-gradient(145deg,#795458,#281a25)}
.music-playlist:nth-child(4n+3) .music-playlist-art{background:linear-gradient(145deg,#4f6856,#17241d)}
.music-playlist:nth-child(4n+4) .music-playlist-art{background:linear-gradient(145deg,#745999,#241c33)}
.music-playlist-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;transition:filter .2s}
.music-art-fallback{display:grid;place-items:center;height:100%;font-size:64px;color:#ffffffb3}
.music-art-play{position:absolute;right:12px;bottom:12px;width:42px;height:42px;display:grid;place-items:center;border-radius:50%;background:#000b;color:white;z-index:2;opacity:0;transition:opacity .2s}
.music-playlist:hover .music-art-play,.music-playlist:focus-visible .music-art-play{opacity:1}
.music-playlist:hover img{filter:brightness(.75)}
.music-playlist-title{font-size:16px;font-weight:650;line-height:1.45;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.music-playlist-meta{color:#aaa;font-size:13px;line-height:1.5}
.music-muted,.music-first-listen{color:#aaa;line-height:1.7}
.music-first-listen{padding:22px;background:#131313;border:1px solid #252525;border-radius:10px}
.music-song-shelf{display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:190px;overflow:auto;padding-bottom:14px;gap:22px;scroll-snap-type:x proximity}
.music-song-shelf .song-card{scroll-snap-align:start;min-width:0}
#pl-view-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:30px 24px}
#pl-view-add{display:flex;width:38px;height:38px;align-items:center;justify-content:center;border:1px solid #444;border-radius:50%;font-size:26px}
.song-row{padding-top:10px;padding-bottom:10px;border-radius:4px}
.song-row.active .s-title{color:#fff}
.tbl-head{padding-bottom:12px;color:#888}
#player{background:#212121;border-top:1px solid #414141}
#now-art{border-radius:3px}
#now-title{font-size:14px}
#now-artist{font-size:12px}
#pfill,#dl-progress-bar{background:#ff4e45}
#btn-play:hover{background:#ddd}
#ptrack{background:#555}
#search-input{border-radius:10px;max-width:640px;border:1px solid #454545;background:#202020}
#auth-screen{background:radial-gradient(ellipse at top,#252525,#030303 65%)}
#auth-screen input{background:#161616;border:1px solid #444;border-radius:8px}
.auth-logo{font-family:var(--font-display);font-size:36px;letter-spacing:-1px}
.auth-logo span{color:#fff}
#np-screen{background:linear-gradient(160deg,#25252b,#090909)}
#np-title{font-family:var(--font-display)}
@media(min-width:1200px){.music-shelf,.music-song-shelf{grid-auto-columns:210px}}
@media(max-width:1000px){.view{padding-left:24px;padding-right:24px}.music-search-action{min-width:0}.music-search-action span{display:none}.view-hero{padding:28px 24px}.hero-actions,.sort-bar{padding-left:24px;padding-right:24px}}
@media(min-width:701px) and (max-width:768px){:root{--sidebar-w:64px}.sidebar-logo{padding:22px 0}.sidebar-section{padding:0 4px}.nav-btn{padding:12px 8px}.pl-item{padding:8px 0}}
@media(max-width:700px){
 :root{--sidebar-w:0px;--bn-h:calc(58px + env(safe-area-inset-bottom));--player-h:calc(var(--bn-h) + 72px)}
 #sidebar{display:none}#topbar{height:58px;min-height:58px;padding:0 18px}#user-menu-btn{padding:4px}#user-name,#user-menu-btn>svg{display:none}
 .view{padding:18px 18px 150px}.music-chips{margin-right:-18px;padding-right:18px}.music-chip{font-size:13px;padding:9px 13px}
 .music-welcome{padding:14px 0 28px}.music-welcome h1{font-size:36px}.music-search-action{padding:10px 14px;font-size:22px}.music-eyebrow{font-size:13px}
 .music-section{margin-bottom:28px}.music-section-heading{margin-bottom:16px}.music-section-heading h2{font-size:23px}.music-section-heading .ghost-btn{padding:7px 12px}
 .music-shelf,.music-song-shelf{grid-auto-columns:156px;gap:16px;margin-right:-18px;padding-right:18px}.music-playlist-title{font-size:14px}.music-playlist-meta{font-size:12px}
 #pl-view-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px}.card-grid:not(.music-song-shelf){grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 16px}
 .view-hero{padding:24px 18px;gap:18px;min-height:175px}.view-hero-art{width:115px;height:115px}.view-hero-info h1{font-size:25px;letter-spacing:-.6px}.hero-actions,.sort-bar{padding-left:18px;padding-right:18px}
 #bottom-nav{display:flex;bottom:0;height:var(--bn-h);align-items:center;background:#111;border-top:1px solid #292929;padding-bottom:env(safe-area-inset-bottom)}
 .bn-btn{font-size:10px;padding:5px 8px;min-width:48px;gap:5px}.bn-btn.active svg{color:#fff}
 #player{position:fixed;left:0;right:0;bottom:var(--bn-h);height:72px;grid-template-columns:minmax(0,1fr) auto;padding:0 14px;z-index:31}
 #now-playing{max-width:none}#now-art{width:44px;height:44px}#now-like{display:none}#ctrl-row{gap:0}#progress-row{display:none}#btn-play{width:36px;height:36px}
 body.player-idle{--player-h:var(--bn-h)}#queue-panel.open{position:fixed;inset:0;width:100%;z-index:40;border-radius:0}
}
@media(hover:none){.music-art-play{opacity:1;width:34px;height:34px;font-size:13px}}
/* Identidad RADIOMIL */
:root{--bg:#030303;--bg2:#0c0c0c;--bg3:#202020;--bg4:#303030;--bg5:#454545;--green:#ff4e45;--green2:#ff7870;--muted:#aaa;--radius:10px}
body,#sidebar,#main,#topbar{background:#030303}
#sidebar{border-right-color:#242424}
.sidebar-logo{font-size:22px;font-weight:850;letter-spacing:-1px;gap:10px}
.sidebar-logo .butler-mark,.auth-logo .butler-mark{filter:none;color:#ff4e45}
.nav-btn{border-radius:12px}.nav-btn.active{background:#ff4e4514;color:#fff}
.nav-btn.active svg{color:#ff4e45}
#user-avatar{background:#ff4e45;color:#fff}
#user-menu-btn{background:#222;border:1px solid #383838}
#topbar{border-bottom-color:#202020}
.music-chip{background:#202020;border-color:#333;border-radius:24px;color:#ccc}
.music-chip.active{background:#ff4e45;border-color:#ff4e45;color:#fff;font-weight:700}
.music-chip:hover{border-color:#777}
.music-welcome{position:relative;isolation:isolate;overflow:hidden;min-height:300px;padding:38px;margin:8px 0 38px;border:1px solid #353535;border-radius:22px;background:radial-gradient(ellipse at 82% 30%,#ff4e4520,transparent 50%),linear-gradient(115deg,#151515,#161616)}
.radiomil-hero-copy{position:relative;z-index:2;max-width:65%}
.radiomil-kicker{font-size:10px;font-weight:750;letter-spacing:2.5px;color:#ff4e45;margin-bottom:20px}
.music-welcome .music-eyebrow{font-size:13px;color:#b5b5b5;margin-bottom:12px}
.music-welcome h1{font-size:clamp(38px,4.4vw,64px);letter-spacing:-2.6px;font-weight:800;line-height:1.02}
.music-welcome h1 span{color:#ff4e45}
.radiomil-hero-sub{color:#aaa;font-size:13px;line-height:1.7;margin-top:18px;max-width:320px}
.music-welcome .music-search-action{position:absolute;bottom:28px;right:28px;z-index:3;border:1px solid #ffffff24;background:#0a0a0aaa;border-radius:30px;min-width:0;backdrop-filter:blur(12px);color:#ddd;font-size:13px}
.radiomil-wave{position:absolute;right:4%;top:15%;width:34%;height:58%;display:flex;align-items:center;justify-content:center;gap:9px;transform:rotate(-12deg);opacity:.7;z-index:0}
.radiomil-wave i{width:15px;border-radius:20px;background:linear-gradient(#ff4e45,#b52323);height:30%;box-shadow:0 0 28px #ff4e4518}
.radiomil-wave i:nth-child(2n){height:55%}.radiomil-wave i:nth-child(3n){height:85%}.radiomil-wave i:nth-child(5){height:100%}
.music-section-heading h2{font-size:25px;font-weight:750;letter-spacing:-.6px}
.music-section-heading .ghost-btn{color:#ccc;border-color:#444;font-weight:500}
.music-playlist-art,.card-art{border-radius:12px;box-shadow:0 9px 24px #0003}
.music-playlist-art img{transition:filter .2s,transform .25s}
.music-playlist:hover img{transform:scale(1.035)}
.music-playlist-title{font-size:15px;margin-top:3px}.music-playlist-meta{color:#999;font-size:12px}
.music-art-play{background:#ff4e45;color:#fff;box-shadow:0 5px 20px #0006}
.song-card .card-play,.play-all-btn,.btn-green{background:#ff4e45;color:#fff}
.song-card .card-play:hover,.play-all-btn:hover,.btn-green:hover{background:#ff7870}
#pfill,#dl-progress-bar{background:#ff4e45}
#player{background:#212121;border-top-color:#414141;box-shadow:0 -10px 40px #0003}
#now-art{border-radius:8px}#btn-play{background:#ff4e45}#btn-play:hover{background:#ff7870}
#np-screen{background:radial-gradient(ellipse at top right,#292929,#101010 75%)}
.view-hero{background:linear-gradient(155deg,#252525,#030303 85%)}
#auth-screen{background:radial-gradient(ellipse at 50% 15%,#252525,#030303 65%)}
.auth-logo{letter-spacing:-1.8px}.auth-logo .butler-mark{width:50px;height:50px}
#auth-screen input{background:#161616;border-color:#444;border-radius:12px;padding:15px 17px}
#auth-screen input:focus{border-color:#ff4e45;box-shadow:0 0 0 3px #ff4e4510}
#auth-screen .btn-green{padding:15px;margin-top:10px}
#search-input{background:#202020;border-color:#454545;border-radius:14px}
#search-input:focus{border-color:#ff4e45}
.music-first-listen{background:#151515;border-color:#333;color:#bbb}
@media(max-width:1000px){.music-welcome{padding:30px}.music-welcome .music-search-action{padding:10px 15px}.music-welcome .music-search-action span{display:none}}
@media(max-width:700px){
 .music-welcome{padding:25px 22px 28px;min-height:280px;margin-top:4px;margin-bottom:28px;border-radius:18px;align-items:flex-start}
 .radiomil-hero-copy{max-width:82%}.radiomil-kicker{font-size:9px;letter-spacing:2px;margin-bottom:18px}
 .music-welcome h1{font-size:43px;letter-spacing:-1.8px}.music-welcome .music-eyebrow{font-size:12px}
 .radiomil-hero-sub{max-width:210px;font-size:12px;margin-top:15px}.radiomil-wave{right:-18%;top:19%;width:65%;height:65%;gap:8px;opacity:.23}
 .radiomil-wave i{width:13px}.music-welcome .music-search-action{right:17px;bottom:20px;padding:10px 14px;font-size:22px}
 .music-section-heading h2{font-size:23px}#bottom-nav{background:#111;border-top-color:#292929}
 .bn-btn.active{color:#ff4e45}.bn-btn.active svg{color:#ff4e45}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Paleta YouTube Music: base negra, controles blancos y acentos rojos. */
.music-chip.active,.play-all-btn,.song-card .card-play,.btn-green,#btn-play,.music-art-play{background:#fff;color:#030303;border-color:#fff}
.music-chip.active:hover,.play-all-btn:hover,.song-card .card-play:hover,.btn-green:hover,#btn-play:hover{background:#ddd}
.sidebar-logo .butler-mark,.auth-logo .butler-mark{color:#ff0033}
.music-welcome h1 span{color:#fff}
.preference-panel{width:min(800px,calc(100vw - 28px));padding:28px;border:1px solid #3c3c3c;border-radius:20px;background:#151515;max-height:90dvh}
.preference-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:14px}.preference-heading h2{font-size:28px;letter-spacing:-.8px}.preference-heading .radiomil-kicker{margin-bottom:9px}
.preference-close{background:#292929;color:#fff;border:0;border-radius:50%;width:36px;height:36px;cursor:pointer;font-size:24px;flex-shrink:0}
.preference-description{color:#bbb;font-size:14px;line-height:1.7;margin-bottom:24px}.preference-panel h3{font-size:16px;margin:20px 0 12px}
.preference-genres{display:flex;flex-wrap:wrap;gap:9px}.preference-genres .music-chip.active{background:#fff;color:#080808;border-color:#fff}.preference-genres .music-chip{font-size:13px}
#preference-catalog{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-height:310px;overflow:auto;margin:14px 0;padding:3px}
.preference-playlist{display:flex;align-items:center;gap:10px;border:1px solid #383838;background:#1e1e1e;border-radius:10px;padding:10px;cursor:pointer;min-width:0}
.preference-playlist:has(input:checked){border-color:#aaa;background:#292929}.preference-playlist input{width:17px!important;height:17px;margin:0!important;accent-color:#ff4e45;flex-shrink:0}
.preference-cover{width:42px;height:42px;display:grid;place-items:center;background:#343434;border-radius:6px;flex-shrink:0;overflow:hidden}.preference-cover img{width:100%;height:100%;object-fit:cover}
.preference-playlist>span:last-child{min-width:0}.preference-playlist strong{display:block;font-size:13px;line-height:1.5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.preference-playlist small{display:block;color:#aaa;font-size:11px;line-height:1.6}
.preference-hint{font-size:12px;line-height:1.6;margin-bottom:12px}.preference-actions{display:flex;justify-content:flex-end;gap:10px;padding-top:16px;border-top:1px solid #333}.preference-actions .btn-green{width:auto;margin:0}.preference-actions .btn{font-size:12px;padding:12px 20px}
#preference-error{color:#ff8980;font-size:13px}.preference-actions button:disabled{opacity:.6;cursor:wait}
@media(max-width:600px){.preference-panel{padding:20px 16px;max-height:92dvh}.preference-heading h2{font-size:24px}#preference-catalog{grid-template-columns:1fr;max-height:240px}.preference-description{font-size:13px}.preference-actions{justify-content:space-between}.preference-actions .btn{padding:12px 15px}}

/* Mayor contraste en las playlists de la barra lateral. */
#sidebar{background:#141414;border-right-color:#343434}
#sidebar .lib-label{color:#e2e2e2}
#sidebar .pl-item{background:#202020;border:1px solid #303030;margin:5px 0}
#sidebar .pl-item:hover{background:#2b2b2b;border-color:#505050}
#sidebar .pl-item.active{background:#343434;border-color:#676767;box-shadow:inset 3px 0 #ff4e45}
#sidebar .pl-name{color:#f5f5f5;font-size:14px;line-height:1.4}
#sidebar .pl-meta{color:#c3c3c3;font-size:12px;margin-top:4px}
#sidebar .pl-thumb{background:#383838}
#sidebar .shared-badge{background:#414141;color:#ededed}
@media(min-width:769px){
 #sidebar .pl-info{flex:1}
 #sidebar .pl-name{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
}

/* Interacción suave de las playlists, con selección sincronizada. */
#sidebar .pl-item{position:relative;transition:background .18s ease,border-color .18s ease,transform .18s ease,box-shadow .18s ease}
#sidebar .pl-thumb{transition:box-shadow .18s ease}
#sidebar .pl-thumb img{transition:transform .22s ease}
#sidebar .pl-item:focus-visible{outline:2px solid #ff8b83;outline-offset:-2px;background:#2b2b2b}
#sidebar .pl-item.active .pl-name{color:#ffb4ac}
#sidebar .pl-item.active .pl-thumb{box-shadow:0 0 0 2px #ff4e4570}
@media(hover:hover) and (pointer:fine){
 #sidebar .pl-item:hover{transform:translateX(3px);box-shadow:0 4px 12px #0003}
 #sidebar .pl-item:hover .pl-thumb img{transform:scale(1.08)}
}
#sidebar .pl-item:active{transform:scale(.98)}
@media(prefers-reduced-motion:reduce){
 #sidebar .pl-item,#sidebar .pl-thumb,#sidebar .pl-thumb img{transition:none}
 #sidebar .pl-item:hover,#sidebar .pl-item:active,#sidebar .pl-item:hover .pl-thumb img{transform:none}
}