@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@700;900&family=Cinzel:wght@400;600;800&family=IM+Fell+English:ital@0;1&family=Rajdhani:wght@400;500;600;700&display=swap');

:root{
  --gold:#c8922e; --gold-hi:#f0c96a; --blue:#164f84; --cyan:#23b8ff;
  --ink:#02040a; --panel:#06102a; --panel2:#091636; --line:#18376d;
  --txt:#ede4cc; --dim:#9ba9c8; --green:#1ed760; --danger:#b51d1d;
  --shadow:0 16px 44px rgba(0,0,0,.38); --r:18px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{color:var(--txt);font-family:'Rajdhani',system-ui,sans-serif;background:var(--ink);overflow-x:hidden}
.site-bg{position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse 100% 60% at 50% -5%,#2a0d56 0%,transparent 55%),radial-gradient(ellipse 70% 40% at 5% 100%,#12092a 0%,transparent 50%),radial-gradient(ellipse 60% 35% at 95% 90%,#0b1e50 0%,transparent 50%),linear-gradient(180deg,#04060e,#020408)}
.app{position:relative;z-index:5;max-width:1200px;margin:0 auto;padding:12px 14px 106px}
.panel{position:relative;overflow:hidden;background:linear-gradient(180deg,rgba(7,17,45,.96),rgba(4,11,28,.94));border:1px solid rgba(200,146,46,.22);border-radius:var(--r);box-shadow:var(--shadow),inset 0 0 0 1px rgba(24,55,109,.28)}
.site-header{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;padding:10px 0 12px;border-bottom:1px solid rgba(200,146,46,.22)}
.brand-title{font:900 clamp(24px,2.6vw,38px)/1 'Cinzel Decorative',serif;color:var(--gold-hi)}
.brand-sub{margin-top:4px;font:italic 18px/1.2 'IM Fell English',serif;color:#c4b89c}
.main-nav{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.nav-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:38px;min-width:130px;padding:0 14px;border-radius:999px;border:1px solid rgba(200,146,46,.28);background:linear-gradient(180deg,#0d2e5a,#114b83);box-shadow:inset 0 0 0 1px rgba(41,139,210,.28),0 4px 16px rgba(0,0,0,.24);color:#f8f6ef;text-decoration:none;font:700 14px/1 'Rajdhani',sans-serif}
.nav-btn.active{background:linear-gradient(180deg,#0e4f84,#0c679f)}
.spotify-layout{margin-top:14px;display:grid;grid-template-columns:250px 1fr;gap:14px;min-height:calc(100dvh - 220px)}
.sidebar{padding:14px;align-self:start;display:grid;gap:10px;position:sticky;top:12px}
.side-title{color:#8ea4c6;font:800 11px/1 'Rajdhani',sans-serif;letter-spacing:.25em;text-transform:uppercase;margin-bottom:4px}
.side-title.small{margin-top:2px}
.side-item,.side-btn{min-height:42px;border:none;border-radius:14px;padding:0 12px;display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:8px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);color:#fff;cursor:pointer;text-align:left}
.side-item.active,.side-btn.active{background:linear-gradient(180deg,rgba(30,215,96,.18),rgba(255,255,255,.04));border-color:rgba(30,215,96,.34)}
.side-item span,.side-btn span{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.08)}
.side-item strong,.side-btn strong{font:800 13px/1 'Rajdhani',sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-item em,.side-btn em{font-style:normal;color:var(--gold-hi);font-weight:900}
.side-divider{height:1px;background:rgba(255,255,255,.08);margin:4px 0}
.side-list{display:grid;gap:6px;max-height:188px;overflow:auto;padding-right:3px}
.playlist-create{display:grid;grid-template-columns:1fr 62px;gap:6px}
.playlist-create input{min-width:0;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:10px;color:#fff;padding:9px 10px}
.playlist-create button{border:none;border-radius:10px;background:linear-gradient(180deg,#0e4f84,#0c679f);color:#fff;font-weight:900;cursor:pointer}
.upload-btn{margin-top:8px;min-height:42px;border:none;border-radius:14px;color:#120b03;font:900 14px/1 'Rajdhani',sans-serif;cursor:pointer;background:linear-gradient(180deg,#f0c96a,#c8922e)}
.main-panel{padding:0;min-width:0}
.playlist-hero{display:grid;grid-template-columns:160px 1fr;gap:18px;padding:20px;background:linear-gradient(180deg,rgba(22,79,132,.45),rgba(5,13,34,.12));border-bottom:1px solid rgba(255,255,255,.08)}
.playlist-cover{width:160px;height:160px;border-radius:20px;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.16),rgba(35,184,255,.18) 35%,rgba(200,146,46,.20) 68%,rgba(0,0,0,.2));border:1px solid rgba(240,201,106,.22);display:grid;place-items:center;box-shadow:0 16px 40px rgba(0,0,0,.32)}
.disc-icon{font-size:62px;color:#fff}.eyebrow{color:#9cafca;font:800 11px/1 'Rajdhani',sans-serif;letter-spacing:.25em;text-transform:uppercase}
.playlist-info{align-self:end}.playlist-info h1{margin-top:8px;font:900 clamp(38px,5vw,72px)/.92 'Cinzel',serif;color:var(--gold-hi)}
.playlist-info p{margin-top:10px;max-width:720px;color:#d4ddef;font-size:17px;line-height:1.55}.playlist-meta{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap;color:#c8d3ea;font-weight:700}
.toolbar{display:grid;grid-template-columns:1fr 170px 170px 150px auto;gap:10px;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.08)}
.search-box{display:grid;grid-template-columns:auto 1fr;gap:8px;align-items:center;min-height:42px;padding:0 12px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10)}
.search-box input{min-width:0;border:none;outline:none;background:transparent;color:#fff;font:700 14px/1 'Rajdhani',sans-serif}.search-box input::placeholder{color:#90a1bf}
.mini-select,.small-btn{min-height:42px;border-radius:999px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.06);color:#fff;padding:0 12px;font:700 14px/1 'Rajdhani',sans-serif}.small-btn{cursor:pointer}.small-btn.gold{color:#150c03;background:linear-gradient(180deg,#f0c96a,#c8922e);border-color:rgba(240,201,106,.36)}
.status-line{padding:10px 18px;color:#aebdd7;border-bottom:1px solid rgba(255,255,255,.06)}
.track-table{padding:0 18px 14px 10px;overflow:visible}.track-head,.track-row{display:grid;grid-template-columns:44px minmax(220px,1fr) 115px 140px 150px 170px;gap:10px;align-items:center}
.track-head{min-height:42px;color:#8ea4c6;font:800 11px/1 'Rajdhani',sans-serif;letter-spacing:.20em;text-transform:uppercase;background:rgba(4,11,28,.96);border-bottom:1px solid rgba(255,255,255,.08)}
.track-row{min-height:58px;border-radius:10px;color:#dfe7f6;cursor:pointer;padding:0 8px;transition:.15s ease;overflow:visible}.track-row:hover{background:rgba(255,255,255,.06)}.track-row.active{background:linear-gradient(90deg,rgba(30,215,96,.15),rgba(255,255,255,.04))}
.track-number{color:#8ea4c6;font-weight:800;text-align:center}.track-title{min-width:0}.track-title strong{display:block;font:900 18px/1.1 'Rajdhani',sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-title small{display:block;margin-top:3px;color:#91a2c1}
.track-badge{display:inline-flex;align-items:center;justify-content:center;min-height:26px;border-radius:999px;padding:0 9px;font:800 11px/1 'Rajdhani',sans-serif;border:1px solid rgba(255,255,255,.10);color:var(--gold-hi);background:rgba(200,146,46,.10);border-color:rgba(240,201,106,.22)}
.track-line,.track-detail{color:#c6d1e8;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.track-action-cell{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding-right:8px;overflow:visible}
.row-play{width:38px;height:38px;border-radius:50%;border:none;cursor:pointer;color:#06101f;background:var(--green);font-size:15px;flex:0 0 auto}
.row-lyrics{flex:0 0 auto;min-width:86px;max-width:92px;height:38px;border-radius:999px;padding:0 12px;border:1px solid rgba(240,201,106,.34);background:linear-gradient(180deg,rgba(200,146,46,.18),rgba(255,255,255,.04));color:var(--gold-hi);cursor:pointer;font:800 12px/1 'Rajdhani',sans-serif;display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap}
.row-add{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.05);color:#fff;cursor:pointer;flex:0 0 auto}
.empty{padding:32px 10px;color:#c5d1e9;text-align:center}
.player{position:fixed;left:50%;bottom:12px;transform:translateX(-50%);z-index:50;width:min(1180px,calc(100% - 24px));min-height:82px;padding:10px 14px;display:grid;grid-template-columns:280px 1fr 260px;gap:16px;align-items:center;backdrop-filter:blur(8px)}
.now-playing{display:grid;grid-template-columns:54px 1fr;gap:10px;align-items:center;min-width:0}.mini-cover{width:54px;height:54px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(180deg,#0e4f84,#0b1e50);border:1px solid rgba(240,201,106,.18);font-size:25px}
.now-title{font:900 16px/1.1 'Rajdhani',sans-serif;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.now-sub{color:#98a9c8;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player-center{display:grid;gap:7px}.player-controls{display:flex;justify-content:center;gap:10px}.player-btn,.player-main{border:none;cursor:pointer;color:#fff}.player-btn{width:38px;height:38px;border-radius:13px;background:linear-gradient(180deg,#10192e,#0d1527);border:1px solid rgba(255,255,255,.10)}.player-main{width:48px;height:48px;border-radius:16px;background:linear-gradient(180deg,#1dc3ff,#2388ff);box-shadow:0 0 28px rgba(36,165,255,.18)}
.progress-row{display:grid;grid-template-columns:44px 1fr 44px;gap:8px;align-items:center;color:#c7d3e8;font:800 12px/1 'Rajdhani',sans-serif}.progress-row input,.player-right input{width:100%}.player-right{display:grid;grid-template-columns:1fr 90px;gap:10px;align-items:center}.player-right select{min-width:0;height:40px;border-radius:12px;border:1px solid rgba(255,255,255,.10);background:#0d1428;color:#fff;padding:0 10px}
.lyrics-panel{position:fixed;right:28px;top:92px;bottom:104px;width:min(520px,calc(100vw - 56px));margin:0;padding:16px;z-index:120;border-radius:20px;border:1px solid rgba(240,201,106,.32);background:radial-gradient(circle at 20% 0%,rgba(200,146,46,.13),transparent 32%),linear-gradient(180deg,rgba(7,17,45,.88),rgba(4,11,28,.82));box-shadow:0 30px 90px rgba(0,0,0,.58),inset 0 0 0 1px rgba(24,55,109,.28);backdrop-filter:blur(14px) saturate(1.12)}
.lyrics-panel.hidden{display:none}.lyrics-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid rgba(255,255,255,.10)}.lyrics-head h2{font:900 28px/1.05 'Cinzel',serif;color:var(--gold-hi)}.close-red{color:#fff;background:linear-gradient(180deg,#c62828,#8f1515);border:1px solid rgba(255,150,150,.34);box-shadow:0 8px 20px rgba(120,0,0,.28),inset 0 1px 0 rgba(255,255,255,.18)}
.lyrics-body{max-height:calc(100% - 82px);overflow:auto;white-space:normal;padding:16px;border-radius:16px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.025);color:#edf3ff;font:700 18px/1.65 'Rajdhani',sans-serif}.lyrics-stanza{margin:0 0 18px;padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.07)}.lyrics-stanza:last-child{margin-bottom:0;padding-bottom:0;border-bottom:none}.lyrics-empty{color:#9cafca;font-style:italic}
.modal.hidden{display:none}.modal{position:fixed;inset:0;z-index:100}.modal-backdrop{position:absolute;inset:0;background:rgba(1,4,10,.74);backdrop-filter:blur(6px)}.modal-card{position:relative;width:min(920px,calc(100% - 24px));margin:34px auto;padding:18px}.modal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:16px}.modal-head h2{font:900 32px/1 'Cinzel',serif;color:var(--gold-hi)}.close-btn{width:42px;height:42px;border-radius:12px;border:1px solid rgba(255,255,255,.10);background:#0d1528;color:#fff;font-size:26px;cursor:pointer}
.upload-form{display:grid;gap:14px}.upload-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.field{display:grid;gap:8px}.field.full{grid-column:1/-1}.field label{font:800 11px/1 'Rajdhani',sans-serif;letter-spacing:.22em;text-transform:uppercase;color:#8ea4c6}.field input,.field select,.field textarea{width:100%;background:#0d1428;border:1px solid rgba(255,255,255,.10);color:#fff;border-radius:12px;padding:12px 14px;font:700 14px/1.45 'Rajdhani',sans-serif}.field textarea{resize:vertical;min-height:130px}.field small,.upload-status{color:#9cafca}.upload-actions{display:flex;justify-content:flex-end;gap:10px}

@media(max-width:1080px){
  .site-header,.spotify-layout{grid-template-columns:1fr;display:grid}.main-nav{justify-content:flex-start}.spotify-layout{gap:10px}.sidebar{position:static;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.side-title,.side-divider{display:none}.side-list{display:contents}.side-btn,.side-item{min-height:38px;padding:0 8px;grid-template-columns:24px minmax(0,1fr) auto}.side-btn span,.side-item span{width:24px;height:24px;font-size:12px}.side-btn strong,.side-item strong{font-size:11px}.playlist-create{grid-column:1/-1}.upload-btn{grid-column:1/-1;min-height:38px}
  .toolbar{grid-template-columns:1fr 1fr}.search-box{grid-column:1/-1}.track-head{display:none}.track-table{padding:0 6px 112px}.track-row{grid-template-columns:28px minmax(0,1fr) 104px;min-height:52px;gap:8px;padding:0 8px}.track-category-cell,.track-line,.track-detail{display:none}.track-number{grid-column:1;text-align:center}.track-title{grid-column:2;min-width:0}.track-action-cell{grid-column:3;justify-content:flex-end;gap:5px;padding-right:0}.row-play,.row-add{width:32px;height:32px;min-width:32px;font-size:12px}.row-lyrics{min-width:32px;width:32px;max-width:32px;height:32px;padding:0;border-radius:50%}.lyrics-label{display:none}.track-title strong{font-size:15px;line-height:1.1}.track-title small{margin-top:2px;font-size:11px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .player{left:8px;right:8px;bottom:8px;transform:none;width:auto;min-height:70px;padding:8px;border-radius:16px;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"now controls" "progress progress";gap:6px 8px;align-items:center}.now-playing{grid-area:now;grid-template-columns:38px minmax(0,1fr);gap:8px}.mini-cover{width:38px;height:38px;border-radius:11px;font-size:20px}.now-title{font-size:14px}.now-sub{font-size:12px}.player-center{display:contents}.player-controls{grid-area:controls;justify-content:flex-end;gap:6px}.player-btn{width:32px;height:32px;border-radius:11px;font-size:12px}.player-main{width:42px;height:42px;border-radius:14px;font-size:15px}.progress-row{grid-area:progress;grid-template-columns:38px minmax(0,1fr) 38px;gap:6px;font-size:11px}.player-right{display:none}
  .lyrics-panel{left:12px;right:12px;top:78px;bottom:92px;width:auto;padding:12px}.lyrics-head h2{font-size:23px}.modal-card{margin:10px auto;max-height:calc(100dvh - 20px);overflow:auto}.upload-grid{grid-template-columns:1fr}
}
@media(max-width:640px){
  .app{max-width:430px;padding:8px 10px 116px}.site-header{gap:8px;padding:6px 0 8px}.brand-title{font-size:24px}.brand-sub{font-size:12px}.main-nav{display:grid;grid-template-columns:1fr 1fr;width:100%;gap:7px}.nav-btn{min-height:36px;min-width:0;font-size:12px;padding:0 8px}.playlist-hero{grid-template-columns:58px minmax(0,1fr);padding:12px;gap:10px}.playlist-cover{width:58px;height:58px;border-radius:13px}.disc-icon{font-size:26px}.playlist-info h1{font-size:28px;line-height:.98}.playlist-info p{display:none}.playlist-meta{margin-top:7px;font-size:12px;gap:5px}.toolbar{grid-template-columns:1fr;gap:8px;padding:10px}.search-box,.mini-select,.small-btn{min-height:38px}.status-line{padding:8px 12px;font-size:13px}.track-row{grid-template-columns:22px minmax(0,1fr) 94px;min-height:48px;gap:6px;padding:0 6px}.track-number{font-size:12px}.track-action-cell{gap:4px}.row-play,.row-add,.row-lyrics{width:29px;height:29px;min-width:29px;font-size:11px}.track-title strong{font-size:13px}.track-title small{font-size:10px}.lyrics-panel{top:70px;bottom:86px;left:8px;right:8px;border-radius:16px}.lyrics-body{max-height:calc(100% - 76px);font-size:15px;line-height:1.55;padding:12px}
}


/* ===== ADMIN ONLY ===== */
.hidden-admin{display:none !important;}
.admin-nav-btn{border:1px solid rgba(240,201,106,.32) !important;cursor:pointer;}
.admin-nav-btn.is-admin{background:linear-gradient(180deg,#1ed760,#159c46) !important;color:#031007 !important;}
.admin-modal-card{max-width:560px;}
.admin-box{display:grid;gap:14px;}
.admin-box p{color:#cbd7ef;line-height:1.6;}
.admin-login-box,.admin-status-box{display:grid;gap:10px;}
.admin-login-box label{font:800 11px/1 'Rajdhani',sans-serif;letter-spacing:.22em;text-transform:uppercase;color:#8ea4c6;}
.admin-login-box input{width:100%;background:#0d1428;border:1px solid rgba(255,255,255,.10);color:#fff;border-radius:12px;padding:12px 14px;font:700 14px/1.45 'Rajdhani',sans-serif;}
.admin-status-box.hidden{display:none;}
.admin-status-box strong{color:var(--gold-hi);font:900 22px/1 'Cinzel',serif;}
.admin-status-box span{color:#cbd7ef;}
@media(max-width:640px){.main-nav{grid-template-columns:1fr 1fr 1fr !important}.nav-btn{min-width:0 !important}.admin-nav-btn{padding:0 6px !important}}


/* ===== FIX GLOBAL MODAL SCROLL ===== */
.modal{
  overflow:auto !important;
}

.modal-card{
  max-height:calc(100dvh - 36px) !important;
  overflow-y:auto !important;
}


/* ===== MOBILE COMPACT FILTERS / BIBLIOTECA =====
   En celular la biblioteca de categorías ocupaba demasiada pantalla.
   Solución:
   - En mobile se ocultan los listados largos de chips/categorías.
   - Quedan visibles solo acciones principales.
   - Los filtros se manejan desde los selects del toolbar.
*/
@media(max-width:760px){
  .spotify-layout{
    margin-top:8px !important;
    gap:8px !important;
  }

  .sidebar{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:7px !important;
    padding:8px !important;
    border-radius:14px !important;
    position:static !important;
    max-height:none !important;
    overflow:visible !important;
  }

  .sidebar .side-title,
  .sidebar .side-title.small,
  .sidebar .side-divider{
    display:none !important;
  }

  .sidebar .side-list{
    display:none !important;
  }

  .sidebar .side-item{
    min-height:36px !important;
    height:36px !important;
    border-radius:12px !important;
    padding:0 8px !important;
    grid-template-columns:24px minmax(0,1fr) auto !important;
    gap:6px !important;
  }

  .sidebar .side-item span{
    width:24px !important;
    height:24px !important;
    font-size:12px !important;
  }

  .sidebar .side-item strong{
    font-size:11px !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  .sidebar .side-item em{
    font-size:12px !important;
  }

  .playlist-create{
    grid-column:1 / -1 !important;
    display:none !important;
  }

  .upload-btn{
    grid-column:1 / -1 !important;
    min-height:34px !important;
    height:34px !important;
    border-radius:12px !important;
    font-size:12px !important;
  }

  .playlist-hero{
    grid-template-columns:48px minmax(0,1fr) !important;
    padding:10px !important;
    gap:9px !important;
    border-radius:14px 14px 0 0 !important;
  }

  .playlist-cover{
    width:48px !important;
    height:48px !important;
    border-radius:12px !important;
  }

  .disc-icon{
    font-size:22px !important;
  }

  .playlist-info h1{
    font-size:24px !important;
    line-height:.95 !important;
    margin-top:4px !important;
  }

  .playlist-info .eyebrow{
    font-size:9px !important;
    letter-spacing:.18em !important;
  }

  .playlist-info p{
    display:none !important;
  }

  .playlist-meta{
    margin-top:5px !important;
    font-size:11px !important;
    gap:4px !important;
  }

  .toolbar{
    grid-template-columns:1fr 1fr !important;
    gap:7px !important;
    padding:8px !important;
  }

  .toolbar .search-box{
    grid-column:1 / -1 !important;
    min-height:34px !important;
    height:34px !important;
    border-radius:12px !important;
  }

  .toolbar .search-box input{
    font-size:12px !important;
  }

  .toolbar .mini-select,
  .toolbar .small-btn{
    min-height:34px !important;
    height:34px !important;
    border-radius:12px !important;
    font-size:11px !important;
    padding:0 8px !important;
  }

  .status-line{
    padding:6px 10px !important;
    font-size:12px !important;
  }

  .track-table{
    padding-bottom:88px !important;
  }
}

@media(max-width:430px){
  .sidebar{
    grid-template-columns:1fr 1fr !important;
  }

  .toolbar{
    grid-template-columns:1fr !important;
  }

  .toolbar .mini-select,
  .toolbar .small-btn{
    width:100% !important;
  }

  .playlist-info h1{
    font-size:22px !important;
  }
}


/* ===== FIX INPUTS / SELECTS BLANCOS =====
   Algunos navegadores muestran el desplegable del select con fondo blanco.
   Forzamos color-scheme dark y estilos para inputs/options.
*/
input,
select,
textarea,
button{
  color-scheme: dark !important;
}

select,
.mini-select,
.field select,
.field input,
.field textarea,
.search-box,
.search-box input,
.playlist-create input,
.admin-login-box input{
  background:#0d1428 !important;
  color:#ffffff !important;
  border-color:rgba(255,255,255,.14) !important;
}

select option,
.mini-select option,
.field select option{
  background:#0d1428 !important;
  color:#ffffff !important;
}

select option:checked,
.mini-select option:checked,
.field select option:checked{
  background:#164f84 !important;
  color:#ffffff !important;
}

/* Fallback: si el navegador ignora fondo oscuro del menú nativo,
   al menos el texto no queda invisible. */
@supports not (color-scheme: dark){
  select option,
  .mini-select option,
  .field select option{
    color:#111111 !important;
    background:#ffffff !important;
  }
}

/* En mobile evitamos que el select abierto parezca un bloque blanco gigante */
@media(max-width:760px){
  select,
  .mini-select,
  .field select{
    appearance:none !important;
    -webkit-appearance:none !important;
    background-color:#0d1428 !important;
    background-image:
      linear-gradient(45deg, transparent 50%, #f0c96a 50%),
      linear-gradient(135deg, #f0c96a 50%, transparent 50%) !important;
    background-position:
      calc(100% - 16px) 50%,
      calc(100% - 11px) 50% !important;
    background-size:5px 5px, 5px 5px !important;
    background-repeat:no-repeat !important;
    padding-right:30px !important;
  }

  input,
  select,
  textarea{
    -webkit-text-fill-color:#ffffff !important;
  }

  input::placeholder,
  textarea::placeholder{
    -webkit-text-fill-color:#90a1bf !important;
    color:#90a1bf !important;
  }
}


/* ===== MOBILE SPOTIFY-LIKE HOME =====
   La vista mobile deja de depender solo de inputs.
   Agrega: tarjeta destacada, chips por línea/categoría y cards de temas.
*/
.mobile-home{
  display:none;
}

@media(max-width:760px){
  .mobile-home{
    display:block !important;
    padding:10px 8px 8px !important;
    border-bottom:1px solid rgba(255,255,255,.08);
    background:
      radial-gradient(circle at 18% 10%, rgba(240,201,106,.13), transparent 34%),
      linear-gradient(180deg, rgba(10,26,58,.72), rgba(3,9,24,.35));
  }

  .mh-feature{
    display:grid;
    grid-template-columns:52px minmax(0,1fr) 44px;
    gap:10px;
    align-items:center;
    min-height:74px;
    padding:10px;
    border-radius:18px;
    background:
      linear-gradient(135deg, rgba(30,215,96,.18), rgba(35,184,255,.13) 48%, rgba(200,146,46,.12)),
      rgba(255,255,255,.045);
    border:1px solid rgba(30,215,96,.25);
    box-shadow:0 12px 30px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.045);
  }

  .mh-orb{
    width:52px;
    height:52px;
    border-radius:16px;
    display:grid;
    place-items:center;
    font-size:28px;
    color:#fff;
    background:linear-gradient(180deg,#0e4f84,#0b1e50);
    border:1px solid rgba(240,201,106,.22);
    box-shadow:0 10px 22px rgba(0,0,0,.26);
  }

  .mh-copy{
    min-width:0;
    display:grid;
    gap:2px;
  }

  .mh-copy span{
    color:#9cafca;
    font:900 9px/1 'Rajdhani',sans-serif;
    letter-spacing:.24em;
    text-transform:uppercase;
  }

  .mh-copy strong{
    color:#fff;
    font:900 20px/1.05 'Rajdhani',sans-serif;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .mh-copy small{
    color:#c8d5ee;
    font:700 12px/1.15 'Rajdhani',sans-serif;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  #mobileHeroPlay{
    width:44px;
    height:44px;
    border:none;
    border-radius:50%;
    background:var(--green);
    color:#06101f;
    font-weight:900;
    cursor:pointer;
    box-shadow:0 0 22px rgba(30,215,96,.25);
  }

  .mh-row-head{
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:10px;
    margin:13px 2px 7px;
  }

  .mh-row-head strong{
    color:var(--gold-hi);
    font:900 15px/1 'Cinzel',serif;
  }

  .mh-row-head span{
    color:#92a4c2;
    font:800 11px/1 'Rajdhani',sans-serif;
  }

  .mh-chip-row,
  .mh-card-row{
    display:flex;
    gap:8px;
    overflow-x:auto;
    padding:2px 2px 8px;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
  }

  .mh-chip-row::-webkit-scrollbar,
  .mh-card-row::-webkit-scrollbar{
    display:none;
  }

  .mh-chip{
    flex:0 0 auto;
    min-width:116px;
    height:42px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.10);
    background:rgba(255,255,255,.055);
    color:#fff;
    display:grid;
    grid-template-columns:26px minmax(0,1fr) auto;
    align-items:center;
    gap:6px;
    padding:0 9px;
    cursor:pointer;
    scroll-snap-align:start;
  }

  .mh-chip.active{
    background:linear-gradient(180deg, rgba(30,215,96,.22), rgba(255,255,255,.055));
    border-color:rgba(30,215,96,.38);
  }

  .mh-chip span{
    width:26px;
    height:26px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:rgba(255,255,255,.08);
    font-size:13px;
  }

  .mh-chip strong{
    font:900 12px/1 'Rajdhani',sans-serif;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .mh-chip em{
    font-style:normal;
    color:var(--gold-hi);
    font:900 12px/1 'Rajdhani',sans-serif;
  }

  .mh-track-card{
    flex:0 0 210px;
    min-height:64px;
    border-radius:16px;
    border:1px solid rgba(255,255,255,.09);
    background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.035));
    color:#fff;
    display:grid;
    grid-template-columns:42px minmax(0,1fr) 32px;
    align-items:center;
    gap:9px;
    padding:9px;
    cursor:pointer;
    text-align:left;
    scroll-snap-align:start;
  }

  .mh-track-cover{
    width:42px;
    height:42px;
    border-radius:12px;
    display:grid;
    place-items:center;
    background:linear-gradient(180deg,#0e4f84,#0b1e50);
    border:1px solid rgba(240,201,106,.18);
    font-size:20px;
  }

  .mh-track-copy{
    min-width:0;
    display:grid;
    gap:2px;
  }

  .mh-track-copy strong{
    font:900 14px/1.05 'Rajdhani',sans-serif;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .mh-track-copy small{
    color:#94a6c4;
    font:700 11px/1.1 'Rajdhani',sans-serif;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .mh-track-play{
    width:32px;
    height:32px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:var(--green);
    color:#06101f;
    font-size:12px;
    font-weight:900;
  }

  .mh-empty{
    color:#9cafca;
    font-size:13px;
    padding:8px;
  }

  /* Toolbar pasa a ser búsqueda/filtro secundario, no protagonista */
  .toolbar{
    margin-top:0 !important;
    background:rgba(255,255,255,.025) !important;
  }

  .toolbar::before{
    content:'Buscar y filtrar';
    grid-column:1 / -1;
    color:#9cafca;
    font:900 10px/1 'Rajdhani',sans-serif;
    letter-spacing:.22em;
    text-transform:uppercase;
    margin:2px 2px -2px;
  }

  /* La lista se ve más como playlist, no como tabla */
  .track-table{
    padding-top:4px !important;
  }

  .track-row{
    border-radius:14px !important;
    margin-bottom:6px !important;
    background:rgba(255,255,255,.028);
    border:1px solid rgba(255,255,255,.045);
  }

  .track-row.active{
    background:linear-gradient(90deg,rgba(30,215,96,.18),rgba(255,255,255,.045)) !important;
    border-color:rgba(30,215,96,.22);
  }
}

@media(max-width:430px){
  .mh-feature{
    grid-template-columns:46px minmax(0,1fr) 40px;
    min-height:66px;
    padding:8px;
  }

  .mh-orb{
    width:46px;
    height:46px;
    font-size:24px;
  }

  .mh-copy strong{
    font-size:18px;
  }

  #mobileHeroPlay{
    width:40px;
    height:40px;
  }

  .mh-chip{
    min-width:108px;
    height:40px;
  }

  .mh-track-card{
    flex-basis:190px;
  }
}


/* ===== COVERS / IMÁGENES ===== */
.mini-cover,
.mh-track-cover,
.playlist-cover{
  background-size:cover !important;
  background-position:center !important;
  overflow:hidden;
}


/* ===== FUENTES EXTERNAS EMBEBIDAS ===== */
.external-player.hidden{display:none!important}
.external-player{
  position:fixed; inset:0; z-index:160; display:grid; place-items:center;
  padding:16px; background:rgba(0,0,0,.62); backdrop-filter:blur(7px);
}
.external-player-card{
  width:min(760px, calc(100vw - 24px));
  max-height:calc(100dvh - 32px); overflow:auto; padding:16px;
}
.external-player-head{
  display:flex; justify-content:space-between; gap:12px; align-items:flex-start;
  padding-bottom:12px; border-bottom:1px solid rgba(255,255,255,.09); margin-bottom:12px;
}
.external-player-head h2{
  margin-top:6px; color:var(--gold-hi); font:900 28px/1.05 'Cinzel',serif;
}
.external-player-head p{color:#cbd7ef;margin-top:5px}
.external-player-body{
  border-radius:16px; overflow:hidden; background:#050b18;
  border:1px solid rgba(255,255,255,.08); min-height:220px;
  display:grid; place-items:center;
}
.external-player-body iframe{width:100%;height:360px;border:0;display:block}
.external-empty{padding:22px;color:#dce7fa;text-align:center}
.external-link{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.external-link.hidden{display:none}

.external-artist-info{
  margin-top:12px;
  padding:12px 14px;
  border:1px solid rgba(255,215,122,.18);
  border-radius:16px;
  background:rgba(255,215,122,.06);
  color:#dce7fa;
}
.external-artist-info.hidden{display:none!important}
.external-artist-kicker{
  color:var(--gold-hi);
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:900;
  margin-bottom:6px;
}
.external-artist-info h3{margin:0 0 6px;color:#fff;font-size:16px}
.external-artist-info p{margin:0 0 8px;line-height:1.45;color:#e6edf8}
.external-artist-info small{display:block;color:#aab8d2;margin-top:5px;line-height:1.35}
.external-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:12px}
.artist-mini-link{
  margin-top:4px;
  padding:0;
  border:0;
  background:transparent;
  color:var(--gold-hi);
  font-size:11px;
  font-weight:900;
  cursor:pointer;
  text-align:left;
}
.artist-mini-link.hidden{display:none!important}

@media(max-width:640px){
  .external-player{padding:8px}
  .external-player-card{width:calc(100vw - 16px);padding:12px}
  .external-player-head h2{font-size:22px}
  .external-player-body iframe{height:260px}
}


/* ===== MOBILE PLAYLISTS VISIBLES ===== */
@media(max-width:760px){
  .mh-playlist-row{
    display:flex;
    gap:8px;
    overflow-x:auto;
    padding:2px 2px 8px;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
  }

  .mh-playlist-row::-webkit-scrollbar{
    display:none;
  }

  .mh-playlist-card{
    flex:0 0 178px;
    min-height:74px;
    border-radius:18px;
    border:1px solid rgba(255,255,255,.10);
    background:
      radial-gradient(circle at 20% 10%, rgba(240,201,106,.14), transparent 34%),
      linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.035));
    color:#fff;
    display:grid;
    grid-template-columns:46px minmax(0,1fr);
    align-items:center;
    gap:10px;
    padding:10px;
    cursor:pointer;
    text-align:left;
    scroll-snap-align:start;
  }

  .mh-playlist-card.active{
    background:
      linear-gradient(135deg, rgba(30,215,96,.24), rgba(35,184,255,.12)),
      rgba(255,255,255,.05);
    border-color:rgba(30,215,96,.38);
  }

  .mh-playlist-cover{
    width:46px;
    height:46px;
    border-radius:14px;
    display:grid;
    place-items:center;
    background:linear-gradient(180deg,#1b4f7b,#071832);
    border:1px solid rgba(240,201,106,.22);
    color:var(--gold-hi);
    font-size:18px;
    background-size:cover !important;
    background-position:center !important;
  }

  .mh-playlist-copy{
    min-width:0;
    display:grid;
    gap:4px;
  }

  .mh-playlist-copy strong{
    color:#fff;
    font:900 14px/1.05 'Rajdhani',sans-serif;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .mh-playlist-copy small{
    color:#9cafca;
    font:800 11px/1 'Rajdhani',sans-serif;
  }
}

@media(max-width:430px){
  .mh-playlist-card{
    flex-basis:160px;
    min-height:68px;
    padding:8px;
  }

  .mh-playlist-cover{
    width:42px;
    height:42px;
  }
}


/* ===== MOBILE BUSCADOR DESPLEGABLE + POPULARIDAD ===== */
.mobile-search-toggle{
  display:none;
}

@media(max-width:760px){
  .mobile-search-toggle{
    display:flex !important;
    align-items:center;
    justify-content:space-between;
    width:100%;
    min-height:42px;
    border-radius:16px;
    border:1px solid rgba(240,201,106,.28);
    background:
      linear-gradient(180deg,rgba(240,201,106,.16),rgba(255,255,255,.055)),
      rgba(5,12,28,.76);
    color:#fff;
    padding:0 12px;
    margin:0 0 9px;
    cursor:pointer;
    box-shadow:0 10px 26px rgba(0,0,0,.22);
  }

  .mobile-search-toggle span{
    font:900 14px/1 'Rajdhani',sans-serif;
    letter-spacing:.02em;
  }

  .mobile-search-toggle em{
    font-style:normal;
    color:var(--gold-hi);
    font:900 11px/1 'Rajdhani',sans-serif;
    letter-spacing:.16em;
    text-transform:uppercase;
  }

  /* En celular el buscador deja de ocupar pantalla siempre.
     Se abre desde el botón "Buscar y filtrar". */
  .toolbar{
    display:none !important;
  }

  body.mobile-filters-open .toolbar{
    display:grid !important;
    position:sticky;
    top:0;
    z-index:60;
    border:1px solid rgba(240,201,106,.16);
    box-shadow:0 14px 30px rgba(0,0,0,.28);
    animation:mobileFilterDrop .18s ease-out;
  }

  @keyframes mobileFilterDrop{
    from{opacity:0; transform:translateY(-8px)}
    to{opacity:1; transform:translateY(0)}
  }

  .mh-track-copy small::before{
    content:'';
  }
}


/* ===== FIX FILTRO MOBILE DEBAJO DEL BOTÓN =====
   El buscador se mueve por JS para quedar justo debajo de "Buscar y filtrar".
   Al abrir, se muestra ahí mismo y la pantalla scrollea automáticamente.
*/
@media(max-width:760px){
  body.mobile-filters-open .toolbar{
    display:grid !important;
    position:relative !important;
    top:auto !important;
    z-index:55 !important;
    margin:0 0 12px !important;
    border:1px solid rgba(240,201,106,.20) !important;
    border-radius:16px !important;
    background:
      linear-gradient(180deg,rgba(10,22,52,.98),rgba(5,12,31,.96)) !important;
    box-shadow:0 14px 32px rgba(0,0,0,.34) !important;
  }

  .mobile-search-toggle{
    position:relative;
    z-index:56;
  }

  body.mobile-filters-open .mobile-search-toggle{
    border-color:rgba(30,215,96,.42);
    background:
      linear-gradient(180deg,rgba(30,215,96,.18),rgba(255,255,255,.055)),
      rgba(5,12,28,.82);
  }
}


/* ===== NAV PÚBLICA LIMPIA ===== */
.public-auth-nav{
  margin-left:auto;
}

.public-auth-nav .nav-btn{
  min-width:136px;
}

@media(max-width:760px){
  .public-auth-nav{
    width:100%;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    margin-top:10px;
  }

  .public-auth-nav .nav-btn{
    width:100%;
    min-width:0;
  }
}


/* ===== REPRODUCTOR LIMPIO SIN SELECT VISIBLE ===== */
.sr-only-player-select{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
  opacity:0 !important;
  pointer-events:none !important;
}

.player-right{
  display:flex;
  align-items:center;
  justify-content:flex-end;
}

.player-right #volumeBar{
  width:min(170px, 24vw);
}

@media(max-width:760px){
  .player-right{
    min-width:84px;
  }

  .player-right #volumeBar{
    width:78px;
  }
}


/* ===== PERFIL + MIS PLAYLISTS ===== */
.hidden-user{
  display:none !important;
}

.my-playlist-create{
  width:100%;
  min-height:42px;
  margin:8px 0 12px;
  border-radius:14px;
  border:1px solid rgba(240,201,106,.24);
  background:linear-gradient(180deg,rgba(240,201,106,.20),rgba(200,146,46,.12));
  color:#fff4cd;
  font:900 13px/1 'Rajdhani',sans-serif;
  cursor:pointer;
}

.side-btn.my{
  border-color:rgba(30,215,96,.28);
  background:
    linear-gradient(180deg,rgba(30,215,96,.09),rgba(255,255,255,.035)),
    rgba(8,18,43,.88);
}

.my-playlist-modal-card{
  width:min(820px, calc(100vw - 24px));
  max-height:calc(100dvh - 28px);
  overflow:auto;
}

.my-playlist-form{
  display:grid;
  gap:12px;
}

.my-playlist-form .field{
  display:grid;
  gap:6px;
}

.my-playlist-form label{
  color:#9cafca;
  font:900 11px/1 'Rajdhani',sans-serif;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.my-playlist-form input,
.my-playlist-form textarea{
  width:100%;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:#0d1428;
  color:#fff;
  padding:11px 12px;
  font:700 15px/1.3 'Rajdhani',sans-serif;
}

.my-playlist-track-tools{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  color:#cbd7ef;
  border-top:1px solid rgba(255,255,255,.08);
  padding-top:12px;
}

.my-playlist-track-tools strong{
  color:#fff;
}

.my-playlist-track-tools span{
  color:#9cafca;
}

.my-playlist-tracks{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:8px;
  max-height:340px;
  overflow:auto;
  padding-right:4px;
}

.my-track-check{
  display:grid !important;
  grid-template-columns:22px 44px minmax(0,1fr);
  align-items:center;
  gap:9px;
  min-height:58px;
  padding:8px;
  border-radius:14px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.08);
  cursor:pointer;
  text-transform:none !important;
  letter-spacing:0 !important;
}

.my-track-check input{
  width:18px;
  height:18px;
}

.my-track-mini-cover{
  width:44px;
  height:44px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:linear-gradient(180deg,#1b4f7b,#071832);
  background-size:cover !important;
  background-position:center !important;
  border:1px solid rgba(240,201,106,.22);
  color:var(--gold-hi);
}

.my-track-check strong{
  display:block;
  color:#fff;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.my-track-check small{
  display:block;
  color:#9cafca;
  margin-top:3px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.row-add-user{
  width:42px;
  height:38px;
  border-radius:999px;
  border:1px solid rgba(240,201,106,.35);
  background:rgba(240,201,106,.12);
  color:var(--gold-hi);
  font-weight:900;
  cursor:pointer;
}

@media(max-width:760px){
  .my-playlist-modal-card{
    width:calc(100vw - 14px);
    max-height:calc(100dvh - 14px);
  }

  .my-playlist-tracks{
    grid-template-columns:1fr;
    max-height:46dvh;
  }

  .my-playlist-track-tools{
    display:grid;
  }
}


/* ===== FASE 5 · PLAYLISTS PÚBLICAS / PRIVADAS ===== */
.side-btn.public{
  border-color:rgba(35,184,255,.25);
  background:
    linear-gradient(180deg,rgba(35,184,255,.09),rgba(255,255,255,.035)),
    rgba(8,18,43,.88);
}

.my-playlist-form select{
  width:100%;
  height:44px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:#0d1428;
  color:#fff;
  padding:0 12px;
  font:800 14px/1 'Rajdhani',sans-serif;
}

.row-add-user{
  display:inline-grid;
  place-items:center;
  font-size:18px;
}

.row-add-user::after{
  content:'';
}

@media(max-width:760px){
  .side-title.small.user-library,
  #myPlaylistList,
  #publicPlaylistList{
    max-height:none;
  }
}


/* ===== FIX CREAR PLAYLIST USUARIO VISIBLE ===== */
.user-playlist-yellow{
  width:100%;
  min-height:48px;
  border:0;
  border-radius:16px;
  background:linear-gradient(180deg,#f6d36d,#c8922e);
  color:#071022;
  font:900 15px/1 'Rajdhani',sans-serif;
  cursor:pointer;
  box-shadow:0 12px 26px rgba(200,146,46,.22), inset 0 1px 0 rgba(255,255,255,.28);
  margin:10px 0 12px;
}

.user-playlist-yellow:hover{
  filter:brightness(1.05);
  transform:translateY(-1px);
}

.mobile-create-playlist{
  display:none;
}

.my-playlist-create{
  background:rgba(240,201,106,.10);
  color:#f7d26d;
  border:1px solid rgba(240,201,106,.28);
}

.side-title.small.user-library{
  color:#f0c96a;
}

.playlist-btn.public strong::after{
  content:'';
}

@media(max-width:760px){
  .mobile-create-playlist{
    display:flex !important;
    align-items:center;
    justify-content:center;
    margin:10px 0 14px;
  }

  .sidebar .user-playlist-yellow{
    display:none;
  }
}


/* ===== FIX LOGIN + PLAYLIST USUARIO ===== */
.hidden-user,
.user-library.hidden-user,
.mobile-create-playlist.hidden-user,
.desktop-create-playlist.hidden-user{
  display:none !important;
}

.desktop-create-playlist{
  max-width:220px;
  margin-top:14px !important;
}

.user-playlist-yellow{
  width:100%;
  min-height:48px;
  border:0;
  border-radius:16px;
  background:linear-gradient(180deg,#f6d36d,#c8922e);
  color:#071022;
  font:900 15px/1 'Rajdhani',sans-serif;
  cursor:pointer;
  box-shadow:0 12px 26px rgba(200,146,46,.22), inset 0 1px 0 rgba(255,255,255,.28);
  margin:10px 0 12px;
}

.user-playlist-yellow:hover{
  filter:brightness(1.05);
  transform:translateY(-1px);
}

.row-add-user{
  width:42px;
  height:38px;
  border-radius:999px;
  border:1px solid rgba(240,201,106,.35);
  background:linear-gradient(180deg,rgba(240,201,106,.22),rgba(200,146,46,.10));
  color:var(--gold-hi);
  font:900 20px/1 'Rajdhani',sans-serif;
  cursor:pointer;
  display:inline-grid;
  place-items:center;
}

.row-add-user:hover{
  background:linear-gradient(180deg,#f6d36d,#c8922e);
  color:#071022;
}

.mobile-create-playlist{
  display:none;
}

@media(max-width:760px){
  .desktop-create-playlist{
    display:none !important;
  }

  .mobile-create-playlist:not(.hidden-user){
    display:flex !important;
    align-items:center;
    justify-content:center;
    margin:10px 0 14px;
  }

  .sidebar .user-playlist-yellow{
    display:none;
  }
}


/* ===== FIX MODAL CREAR PLAYLIST ===== */
#btnCrearMiPlaylist{
  display:none !important;
}

.my-playlist-modal-card{
  max-height:calc(100dvh - 26px);
  overflow:auto;
  padding-bottom:0;
}

.my-playlist-modal-card .modal-head{
  position:sticky;
  top:0;
  z-index:4;
  background:linear-gradient(180deg,rgba(7,17,45,.98),rgba(7,17,45,.94));
  border-bottom:1px solid rgba(255,255,255,.08);
  padding-bottom:12px;
}

.my-playlist-modal-card .modal-actions{
  position:sticky;
  bottom:0;
  z-index:4;
  background:linear-gradient(0deg,rgba(7,17,45,.98),rgba(7,17,45,.92));
  border-top:1px solid rgba(255,255,255,.08);
  padding:14px 0;
  margin-top:10px;
}

.my-playlist-modal-card .close-btn,
#btnCerrarMyPlaylist{
  cursor:pointer;
  pointer-events:auto;
}

.my-playlist-tracks{
  padding-bottom:8px;
}


/* ===== FIX FILTRO PLAYLIST USUARIO ===== */
.desktop-create-playlist,
#btnCrearMiPlaylistMain{
  display:none !important;
}


/* ===== FIX DEFINITIVO FILTRO PLAYLISTS ===== */
.side-btn.playlist-btn.my.active,
.side-btn.playlist-btn.public.active,
.side-btn.playlist-btn.active{
  border-color:rgba(240,201,106,.62);
  background:
    linear-gradient(180deg,rgba(30,215,96,.16),rgba(240,201,106,.08)),
    rgba(8,18,43,.95);
}

.mh-playlist-card.active{
  border-color:rgba(240,201,106,.72);
  background:
    linear-gradient(180deg,rgba(30,215,96,.20),rgba(240,201,106,.08)),
    rgba(8,18,43,.95);
}


/* ===== FIX GESTIÓN PLAYLIST USUARIO ===== */
.row-add-user{
  width:30px !important;
  height:30px !important;
  min-width:30px !important;
  border-radius:999px !important;
  display:inline-grid !important;
  place-items:center !important;
  padding:0 !important;
  font:900 16px/1 'Rajdhani',sans-serif !important;
  line-height:1 !important;
  align-self:center !important;
  justify-self:center !important;
  opacity:.88;
}

.row-add-user:hover{
  opacity:1;
  transform:scale(1.04);
}

.side-btn.playlist-btn.my.active,
.side-btn.playlist-btn.public.active,
.side-btn.playlist-btn.active{
  border-color:rgba(240,201,106,.62);
  background:
    linear-gradient(180deg,rgba(30,215,96,.16),rgba(240,201,106,.08)),
    rgba(8,18,43,.95);
}

.mh-playlist-card.active{
  border-color:rgba(240,201,106,.72);
  background:
    linear-gradient(180deg,rgba(30,215,96,.20),rgba(240,201,106,.08)),
    rgba(8,18,43,.95);
}


/* ===== FASE 6 · CABECERA INTELIGENTE ===== */
#smartHeroIntro{
  max-width:720px;
  margin-bottom:10px;
}

.smart-hero{
  margin-top:16px;
  display:grid;
  gap:12px;
}

.smart-main{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px;
  border-radius:20px;
  border:1px solid rgba(30,215,96,.24);
  background:
    radial-gradient(circle at 8% 20%, rgba(30,215,96,.18), transparent 34%),
    linear-gradient(135deg,rgba(255,255,255,.075),rgba(255,255,255,.025));
}

.smart-main > div{
  display:grid;
  gap:4px;
  min-width:0;
}

.smart-kicker{
  font:900 11px/1 'Rajdhani',sans-serif;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:#9cafca;
}

.smart-main strong{
  font:900 clamp(22px,2.6vw,36px)/.98 'Cinzel',serif;
  color:#fff7d6;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.smart-main small{
  color:#cbd7ef;
  font-size:14px;
}

.smart-play{
  min-width:150px;
  min-height:46px;
  border:0;
  border-radius:999px;
  background:linear-gradient(180deg,#1ed760,#09a84a);
  color:#04110a;
  font:900 15px/1 'Rajdhani',sans-serif;
  cursor:pointer;
  box-shadow:0 14px 30px rgba(30,215,96,.24);
}

.smart-cards{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}

.smart-card{
  display:grid;
  grid-template-columns:48px minmax(0,1fr);
  align-items:center;
  gap:10px;
  text-align:left;
  padding:12px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(8,18,43,.72);
  cursor:pointer;
  color:#fff;
}

.smart-card:hover{
  border-color:rgba(240,201,106,.42);
  transform:translateY(-1px);
}

.smart-card-icon{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border-radius:15px;
  background:linear-gradient(180deg,#1b4f7b,#071832);
  color:var(--gold-hi);
  border:1px solid rgba(240,201,106,.18);
}

.smart-card em{
  display:block;
  color:#9cafca;
  font:900 10px/1 'Rajdhani',sans-serif;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.smart-card strong{
  display:block;
  margin-top:3px;
  color:#fff;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.smart-card small{
  display:block;
  margin-top:3px;
  color:#9cafca;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.smart-intentions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.smart-intentions button{
  min-height:34px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid rgba(240,201,106,.24);
  background:rgba(240,201,106,.08);
  color:#f6d36d;
  font:900 13px/1 'Rajdhani',sans-serif;
  cursor:pointer;
}

.smart-intentions button:hover{
  background:rgba(240,201,106,.16);
  border-color:rgba(240,201,106,.48);
}

@media(max-width:900px){
  .smart-main{
    display:grid;
  }

  .smart-play{
    width:100%;
  }

  .smart-cards{
    grid-template-columns:1fr;
  }
}

@media(max-width:760px){
  .playlist-hero .smart-hero{
    display:none;
  }

  #smartHeroIntro{
    display:none;
  }
}


/* ===== FIX CABECERA PC MÁS COMPACTA ===== */
@media (min-width: 901px){
  .playlist-hero{
    align-items:flex-start;
    gap:18px;
    padding:18px 20px;
  }

  .playlist-cover{
    width:150px;
    height:150px;
    min-width:150px;
  }

  .playlist-info .eyebrow{
    font-size:10px;
    letter-spacing:.22em;
    margin-bottom:6px;
  }

  .playlist-info h1{
    font-size:clamp(46px, 5.2vw, 76px) !important;
    line-height:.92;
    margin:0 0 10px;
  }

  .playlist-info p{
    font-size:16px;
    line-height:1.35;
    max-width:760px;
    margin-bottom:10px;
  }

  .playlist-meta{
    margin-top:6px;
    font-size:15px;
  }

  .smart-hero{
    margin-top:14px;
    gap:10px;
  }

  .smart-main{
    padding:12px 14px;
    border-radius:18px;
  }

  .smart-main strong{
    font-size:clamp(24px, 2.4vw, 38px) !important;
    line-height:.95;
  }

  .smart-main small{
    font-size:13px;
  }

  .smart-play{
    min-height:42px;
    min-width:136px;
    font-size:14px;
  }

  .smart-cards{
    gap:10px;
  }

  .smart-card{
    padding:10px;
    grid-template-columns:42px minmax(0,1fr);
  }

  .smart-card-icon{
    width:42px;
    height:42px;
  }

  .smart-card strong{
    font-size:15px;
  }

  .smart-card small{
    font-size:12px;
  }

  .smart-intentions{
    gap:7px;
  }

  .smart-intentions button{
    min-height:30px;
    padding:0 10px;
    font-size:12px;
  }
}

@media (min-width: 901px) and (max-width: 1180px){
  .playlist-info h1{
    font-size:clamp(40px, 4.8vw, 60px) !important;
  }

  .playlist-cover{
    width:132px;
    height:132px;
    min-width:132px;
  }

  .smart-main strong{
    font-size:clamp(22px, 2.2vw, 32px) !important;
  }
}


/* ===== FIX CABECERA: SOLO INTELIGENTE ===== */
.playlist-hero-smart-only{
  display:block !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
}

.playlist-info-smart-only{
  width:100% !important;
  min-width:0;
}

.sr-only-meta{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

.smart-hero-main{
  margin-top:0 !important;
}

@media (min-width: 901px){
  .playlist-hero-smart-only{
    padding:0 !important;
  }

  .main-panel .smart-hero-main{
    display:grid;
    gap:12px;
  }

  .smart-main{
    padding:18px 20px !important;
    min-height:94px;
  }

  .smart-main strong{
    font-size:clamp(28px, 3vw, 44px) !important;
  }

  .smart-cards{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .smart-intentions{
    padding-bottom:2px;
  }
}

@media(max-width:760px){
  .playlist-hero-smart-only{
    display:none !important;
  }
}


/* FASE 1 PLAYER VISUAL — icono animado de reproducción */
.row-play.is-playing{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(180deg,#24e474,#15b951);
  box-shadow:0 0 0 4px rgba(30,215,96,.12), 0 0 22px rgba(30,215,96,.35);
  color:#06101f;
}

.track-row.is-playing{
  background:linear-gradient(90deg,rgba(30,215,96,.22),rgba(35,184,255,.07),rgba(255,255,255,.03));
  box-shadow:inset 3px 0 0 rgba(30,215,96,.85);
}

.playing-bars{
  width:18px;
  height:18px;
  display:inline-flex;
  align-items:flex-end;
  justify-content:center;
  gap:3px;
}

.playing-bars i{
  display:block;
  width:4px;
  min-height:5px;
  border-radius:999px;
  background:#06101f;
  animation:umbandaLiveBars .72s ease-in-out infinite;
  transform-origin:bottom center;
}

.playing-bars i:nth-child(1){animation-delay:-.28s;height:8px}
.playing-bars i:nth-child(2){animation-delay:-.12s;height:15px}
.playing-bars i:nth-child(3){animation-delay:-.40s;height:10px}

@keyframes umbandaLiveBars{
  0%,100%{height:5px;opacity:.62}
  45%{height:18px;opacity:1}
}

.player #btnPlayPause.playing,
.player .player-main.playing #btnPlayPause{
  box-shadow:0 0 0 5px rgba(35,184,255,.10),0 0 26px rgba(35,184,255,.32);
}


/* FASE 2 — YouTube/fuentes externas integradas al reproductor */
.player.has-video,
.player:has(.player-video-dock:not(.hidden)){
  grid-template-columns:260px minmax(280px,1fr) 250px;
  min-height:210px;
  align-items:start;
}

.player-video-dock{
  grid-column:2 / 4;
  margin-top:8px;
  border:1px solid rgba(240,201,106,.22);
  border-radius:16px;
  background:linear-gradient(180deg,rgba(4,11,28,.98),rgba(6,16,42,.96));
  overflow:hidden;
  box-shadow:0 18px 42px rgba(0,0,0,.36);
}

.player-video-head{
  height:34px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 10px 0 14px;
  color:var(--gold-hi);
  font:900 11px/1 'Rajdhani',sans-serif;
  letter-spacing:.12em;
  text-transform:uppercase;
  border-bottom:1px solid rgba(255,255,255,.08);
}

#playerVideoClose{
  width:26px;
  height:26px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:#fff;
  cursor:pointer;
  font-size:18px;
  line-height:1;
}

.player-video-body{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  background:#02040a;
}

.player-video-body iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}

.player-video-official{
  display:inline-flex;
  margin:10px 12px 12px;
  min-height:34px;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  padding:0 14px;
  background:linear-gradient(180deg,var(--gold-hi),#dca83c);
  color:#111827;
  text-decoration:none;
  font:900 12px/1 'Rajdhani',sans-serif;
}

@media (max-width: 820px){
  .player.has-video,
  .player:has(.player-video-dock:not(.hidden)){
    grid-template-columns:1fr;
    min-height:auto;
  }

  .player-video-dock{
    grid-column:1;
    order:-1;
  }
}


/* HOTFIX FASE 2 — video integrado compacto, no pantalla gigante */
.player.has-video,
.player:has(.player-video-dock:not(.hidden)){
  min-height:92px !important;
  grid-template-columns:280px 1fr 260px !important;
  align-items:center !important;
}

.player-video-dock{
  position:absolute !important;
  right:14px !important;
  bottom:94px !important;
  width:min(360px, calc(100vw - 32px)) !important;
  margin:0 !important;
  border-radius:16px !important;
  z-index:80 !important;
  grid-column:auto !important;
  box-shadow:0 18px 46px rgba(0,0,0,.50) !important;
}

.player-video-dock.hidden{
  display:none !important;
}

.player-video-body{
  aspect-ratio:16/9 !important;
  min-height:auto !important;
}

.player-video-body iframe{
  width:100% !important;
  height:100% !important;
  display:block !important;
}

.player-video-head{
  height:30px !important;
}

.player-video-official{
  margin:8px 10px 10px !important;
  min-height:30px !important;
}

@media (max-width: 820px){
  .player-video-dock{
    left:12px !important;
    right:12px !important;
    bottom:100px !important;
    width:auto !important;
  }
}


/* HOTFIX FASE 2 — video como miniatura desplegable */
.player-video-dock{
  width:min(230px, calc(100vw - 32px)) !important;
  right:14px !important;
  bottom:94px !important;
  transition:width .22s ease, transform .22s ease, box-shadow .22s ease !important;
}

.player-video-dock.collapsed{
  width:min(230px, calc(100vw - 32px)) !important;
}

.player-video-dock.expanded{
  width:min(460px, calc(100vw - 32px)) !important;
  transform:translateY(-6px) !important;
  box-shadow:0 24px 64px rgba(0,0,0,.62) !important;
}

#playerVideoToggle{
  width:26px;
  height:26px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(240,201,106,.16);
  color:var(--gold-hi);
  cursor:pointer;
  font:900 16px/1 'Rajdhani',sans-serif;
  display:inline-grid;
  place-items:center;
  margin-left:auto;
  margin-right:6px;
}

.player-video-head{
  gap:8px !important;
}

.player-video-head span{
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.player-video-body{
  aspect-ratio:16/9 !important;
}

.player-video-dock.collapsed .player-video-official{
  display:none !important;
}

@media (max-width: 820px){
  .player-video-dock,
  .player-video-dock.collapsed,
  .player-video-dock.expanded{
    left:auto !important;
    right:12px !important;
    width:min(230px, calc(100vw - 24px)) !important;
    bottom:100px !important;
  }

  .player-video-dock.expanded{
    left:12px !important;
    right:12px !important;
    width:auto !important;
  }
}


/* HOTFIX FASE 2 — flecha visible + stop real para video */
.player-video-dock{
  width:min(220px, calc(100vw - 32px)) !important;
}

.player-video-dock.collapsed{
  width:min(220px, calc(100vw - 32px)) !important;
}

.player-video-dock.expanded{
  width:min(460px, calc(100vw - 32px)) !important;
}

#playerVideoToggle,
.player-video-toggle{
  width:28px !important;
  height:28px !important;
  min-width:28px !important;
  border-radius:50% !important;
  border:1px solid rgba(240,201,106,.42) !important;
  background:linear-gradient(180deg,rgba(240,201,106,.35),rgba(200,146,46,.18)) !important;
  color:var(--gold-hi) !important;
  cursor:pointer !important;
  font:900 18px/1 'Rajdhani',sans-serif !important;
  display:inline-grid !important;
  place-items:center !important;
  margin-left:auto !important;
  margin-right:6px !important;
  box-shadow:0 0 14px rgba(240,201,106,.18) !important;
}

.player-video-head{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
}

.player-video-head span{
  flex:1 1 auto !important;
  min-width:0 !important;
}

.player-video-dock.collapsed .player-video-body{
  aspect-ratio:16/9 !important;
}

.player-video-dock.collapsed iframe{
  pointer-events:auto !important;
}


/* HOTFIX: botón visible para abrir video externo */
.video-mini-link{
  margin-left:6px;
  color:var(--gold-hi) !important;
}

.player-video-toggle,
#playerVideoToggle{
  display:inline-grid !important;
  visibility:visible !important;
  opacity:1 !important;
  width:28px !important;
  height:28px !important;
  min-width:28px !important;
  place-items:center !important;
  border-radius:50% !important;
  border:1px solid rgba(240,201,106,.42) !important;
  background:linear-gradient(180deg,rgba(240,201,106,.35),rgba(200,146,46,.18)) !important;
  color:var(--gold-hi) !important;
  cursor:pointer !important;
  font:900 18px/1 'Rajdhani',sans-serif !important;
  margin-left:auto !important;
  margin-right:6px !important;
}

.player-video-dock.expanded{
  width:min(460px, calc(100vw - 32px)) !important;
  transform:translateY(-6px) !important;
}

.player-video-dock.collapsed{
  width:min(230px, calc(100vw - 32px)) !important;
}


/* FIX FASE 2 — restaurar apertura de video */
.video-mini-link{
  position:relative;
  z-index:5;
}

.player-video-dock.expanded{
  width:min(460px, calc(100vw - 32px)) !important;
  transform:translateY(-6px) !important;
}

.player-video-dock.collapsed{
  width:min(230px, calc(100vw - 32px)) !important;
}

#playerVideoToggle{
  pointer-events:auto !important;
}


/* FIX FASE 2 — video visible sin depender de YouTube API */
.player-video-dock:not(.hidden){
  display:block !important;
  position:fixed !important;
  right:18px !important;
  bottom:118px !important;
  width:min(460px, calc(100vw - 36px)) !important;
  z-index:9999 !important;
  background:linear-gradient(180deg,rgba(4,11,28,.98),rgba(6,16,42,.96)) !important;
  border:1px solid rgba(240,201,106,.28) !important;
  border-radius:16px !important;
  overflow:hidden !important;
  box-shadow:0 22px 64px rgba(0,0,0,.60) !important;
}

.player-video-dock.hidden{
  display:none !important;
}

.player-video-body{
  width:100% !important;
  aspect-ratio:16/9 !important;
  background:#02040a !important;
}

.player-video-body iframe{
  width:100% !important;
  height:100% !important;
  border:0 !important;
  display:block !important;
}

@media (max-width:820px){
  .player-video-dock:not(.hidden){
    left:12px !important;
    right:12px !important;
    width:auto !important;
    bottom:112px !important;
  }
}


/* FIX FASE 2 — asegurar click del botón Video */
#playerVideoOpenBtn,
.video-mini-link{
  pointer-events:auto !important;
  cursor:pointer !important;
  position:relative !important;
  z-index:10000 !important;
}


/* FIX FASE 2 — botón grande sobresaliente para video */
.player-video-big-toggle{
  margin:8px auto 0;
  min-height:36px;
  padding:0 18px;
  border-radius:999px;
  border:1px solid rgba(240,201,106,.55);
  background:linear-gradient(180deg,#f0c96a,#c8922e);
  color:#07112d;
  font:900 13px/1 'Rajdhani',sans-serif;
  cursor:pointer;
  box-shadow:0 0 0 4px rgba(240,201,106,.10),0 16px 34px rgba(0,0,0,.32);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  position:relative;
  z-index:10001;
}

.player-video-big-toggle.hidden{
  display:none !important;
}

.player-video-dock:not(.hidden){
  display:block !important;
  position:fixed !important;
  right:18px !important;
  bottom:124px !important;
  width:min(460px, calc(100vw - 36px)) !important;
  z-index:9999 !important;
  background:linear-gradient(180deg,rgba(4,11,28,.98),rgba(6,16,42,.96)) !important;
  border:1px solid rgba(240,201,106,.28) !important;
  border-radius:16px !important;
  overflow:hidden !important;
  box-shadow:0 22px 64px rgba(0,0,0,.60) !important;
}

.player-video-dock.hidden{
  display:none !important;
}

.player-video-body{
  width:100% !important;
  aspect-ratio:16/9 !important;
  background:#02040a !important;
}

.player-video-body iframe{
  width:100% !important;
  height:100% !important;
  border:0 !important;
  display:block !important;
}

@media(max-width:820px){
  .player-video-dock:not(.hidden){
    left:12px !important;
    right:12px !important;
    width:auto !important;
    bottom:116px !important;
  }
}


/* FIX FASE 2 — Ver video chico, completo y sin corte */
footer.player,
.player.panel{
  overflow:visible !important;
}

.player-video-big-toggle{
  margin:8px auto 0 !important;
  min-height:34px !important;
  padding:0 18px !important;
  border-radius:999px !important;
  border:1px solid rgba(240,201,106,.65) !important;
  background:linear-gradient(180deg,#f0c96a,#c8922e) !important;
  color:#07112d !important;
  font:900 13px/1 'Rajdhani',sans-serif !important;
  cursor:pointer !important;
  box-shadow:0 0 0 4px rgba(240,201,106,.10),0 14px 30px rgba(0,0,0,.35) !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  position:relative !important;
  z-index:10002 !important;
}

.player-video-big-toggle.hidden{
  display:none !important;
}

.player-video-dock:not(.hidden){
  display:block !important;
  position:absolute !important;
  left:50% !important;
  right:auto !important;
  bottom:calc(100% + 12px) !important;
  transform:translateX(-50%) !important;
  width:min(360px, calc(100vw - 32px)) !important;
  max-width:360px !important;
  z-index:10001 !important;
  background:linear-gradient(180deg,rgba(4,11,28,.98),rgba(6,16,42,.97)) !important;
  border:1px solid rgba(240,201,106,.32) !important;
  border-radius:16px !important;
  overflow:hidden !important;
  box-shadow:0 22px 64px rgba(0,0,0,.62) !important;
}

.player-video-dock.hidden{
  display:none !important;
}

.player-video-dock.expanded,
.player-video-dock.collapsed{
  width:min(360px, calc(100vw - 32px)) !important;
  max-width:360px !important;
  transform:translateX(-50%) !important;
}

.player-video-head{
  height:30px !important;
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  padding:0 9px 0 12px !important;
  border-bottom:1px solid rgba(255,255,255,.08) !important;
}

.player-video-head span{
  flex:1 1 auto !important;
  min-width:0 !important;
  overflow:hidden !important;
  white-space:nowrap !important;
  text-overflow:ellipsis !important;
  color:var(--gold-hi) !important;
  font:900 11px/1 'Rajdhani',sans-serif !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
}

.player-video-body{
  width:100% !important;
  aspect-ratio:16/9 !important;
  background:#02040a !important;
}

.player-video-body iframe{
  width:100% !important;
  height:100% !important;
  border:0 !important;
  display:block !important;
}

#playerVideoClose{
  width:24px !important;
  height:24px !important;
  border-radius:50% !important;
  border:1px solid rgba(255,255,255,.14) !important;
  background:rgba(255,255,255,.08) !important;
  color:#fff !important;
  cursor:pointer !important;
}

@media(max-width:820px){
  .player-video-dock:not(.hidden),
  .player-video-dock.expanded,
  .player-video-dock.collapsed{
    left:50% !important;
    width:min(330px, calc(100vw - 24px)) !important;
    max-width:330px !important;
    bottom:calc(100% + 10px) !important;
  }
}


/* FIX FASE 2 — no auto abrir video desde play verde */
#playerVideoOpenBtn,
.video-mini-link{
  display:none !important;
}

.player-video-big-toggle{
  display:inline-flex !important;
}

.player-video-big-toggle.hidden{
  display:none !important;
}


/* FIX FASE 2 — botón Ver video sin pisar el reproductor */
.player-video-big-toggle{
  position:absolute !important;
  left:164px !important;
  bottom:16px !important;
  margin:0 !important;
  min-height:28px !important;
  height:28px !important;
  padding:0 12px !important;
  font-size:12px !important;
  z-index:60 !important;
}

.player-center{
  min-height:auto !important;
}

footer.player,
.player.panel{
  overflow:visible !important;
  min-height:82px !important;
}

.player.has-video,
.player:has(.player-video-dock:not(.hidden)){
  min-height:82px !important;
}

.player-video-dock:not(.hidden){
  bottom:calc(100% + 10px) !important;
}

@media(max-width:820px){
  .player-video-big-toggle{
    left:118px !important;
    bottom:14px !important;
    height:26px !important;
    min-height:26px !important;
    padding:0 10px !important;
    font-size:11px !important;
  }
}


/* FIX — ocultar flecha interna del dock de video sin reemplazar CSS completo */
#playerVideoToggle,
.player-video-toggle{
  display:none !important;
}


/* FIX FASE 2 — botón Ver video ordenado dentro de la info del reproductor */
.player-meta-actions{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  margin-top:6px !important;
  flex-wrap:wrap !important;
}

.player-meta-actions .artist-mini-link{
  margin:0 !important;
}

.player-video-big-toggle{
  position:static !important;
  left:auto !important;
  right:auto !important;
  top:auto !important;
  bottom:auto !important;
  transform:none !important;
  margin:0 !important;
  min-height:24px !important;
  height:24px !important;
  padding:0 10px !important;
  border-radius:999px !important;
  border:1px solid rgba(240,201,106,.55) !important;
  background:linear-gradient(180deg,#f0c96a,#c8922e) !important;
  color:#07112d !important;
  font:900 11px/1 'Rajdhani',sans-serif !important;
  cursor:pointer !important;
  box-shadow:none !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  white-space:nowrap !important;
  z-index:auto !important;
}

.player-video-big-toggle.hidden{
  display:none !important;
}

.now-playing{
  overflow:visible !important;
}

footer.player,
.player.panel{
  overflow:visible !important;
}

@media(max-width:820px){
  .player-meta-actions{
    gap:6px !important;
    margin-top:4px !important;
  }

  .player-video-big-toggle{
    height:22px !important;
    min-height:22px !important;
    padding:0 8px !important;
    font-size:10px !important;
  }
}


/* FIX — restaurar reproductor a diseño normal */
.player,
footer.player,
.player.panel{
  position:relative !important;
  left:auto !important;
  right:auto !important;
  bottom:auto !important;
  width:100% !important;
  max-width:100% !important;
  margin:16px 0 0 0 !important;
  transform:none !important;
}

.main-panel.panel{
  margin-bottom:16px !important;
}

.player-video-dock.audio-compact{
  width:1px !important;
  max-width:1px !important;
  height:1px !important;
  min-height:1px !important;
  opacity:0 !important;
  pointer-events:none !important;
  overflow:hidden !important;
  border:0 !important;
  box-shadow:none !important;
  background:transparent !important;
  right:-20px !important;
  bottom:-20px !important;
}

.player-video-dock.audio-compact .player-video-head,
.player-video-dock.audio-compact #playerVideoClose,
.player-video-dock.audio-compact #playerVideoLabel,
.player-video-dock.audio-compact .player-video-official,
.player-video-dock.audio-compact .player-video-artist-info{
  display:none !important;
}


/* FIX — player cerca de la caja central, sin agrandar el panel */
.spotify-layout{
  min-height:auto !important;
  align-items:start !important;
  margin-bottom:14px !important;
}

.main-panel.panel{
  align-self:start !important;
  margin-bottom:0 !important;
}

.player,
footer.player,
.player.panel{
  position:relative !important;
  left:auto !important;
  right:auto !important;
  bottom:auto !important;
  transform:none !important;
  width:min(1180px, calc(100% - 24px)) !important;
  max-width:1180px !important;
  margin:14px auto 0 !important;
  z-index:80 !important;
}

.app{
  padding-bottom:28px !important;
}

@media(max-width:820px){
  .spotify-layout{
    margin-bottom:12px !important;
  }

  .player,
  footer.player,
  .player.panel{
    width:calc(100% - 16px) !important;
    margin:12px auto 0 !important;
  }

  .app{
    padding-bottom:20px !important;
  }
}


/* FIX — subir reproductor, acercarlo a la caja central */
.player,
footer.player,
.player.panel{
  margin-top:-18px !important;
}

@media(max-width:820px){
  .player,
  footer.player,
  .player.panel{
    margin-top:-10px !important;
  }
}


/* FIX — subir reproductor un poco más */
.player,
footer.player,
.player.panel{
  margin-top:-30px !important;
}

@media(max-width:820px){
  .player,
  footer.player,
  .player.panel{
    margin-top:-18px !important;
  }
}


/* FIX — reproductor flotante estable + volumen responsive */
.player,
footer.player,
.player.panel{
  position:fixed !important;
  left:50% !important;
  right:auto !important;
  bottom:12px !important;
  transform:translateX(-50%) !important;
  width:min(1180px, calc(100vw - 24px)) !important;
  max-width:1180px !important;
  margin:0 !important;
  z-index:90 !important;
}

.app{
  padding-bottom:122px !important;
}

.player-right{
  min-width:0 !important;
  overflow:hidden !important;
}

.player-right input,
.player-right input[type="range"],
#volumeBar{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
}

html,
body{
  overflow-x:hidden !important;
}

@media(max-width:820px){
  .player,
  footer.player,
  .player.panel{
    left:8px !important;
    right:8px !important;
    bottom:8px !important;
    transform:none !important;
    width:auto !important;
    max-width:none !important;
    grid-template-columns:1fr !important;
    gap:8px !important;
    padding:10px !important;
    overflow:hidden !important;
  }

  .now-playing{
    grid-template-columns:46px minmax(0,1fr) !important;
    width:100% !important;
    min-width:0 !important;
  }

  .mini-cover{
    width:46px !important;
    height:46px !important;
  }

  .player-center{
    width:100% !important;
    min-width:0 !important;
  }

  .progress-row{
    grid-template-columns:38px minmax(0,1fr) 38px !important;
    width:100% !important;
    min-width:0 !important;
  }

  .player-right{
    width:100% !important;
    min-width:0 !important;
    grid-template-columns:minmax(0,1fr) !important;
    overflow:hidden !important;
  }

  .player-right select{
    display:none !important;
  }

  .player-right input,
  .player-right input[type="range"],
  #volumeBar{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }

  .app{
    padding-bottom:210px !important;
  }
}


/* FIX — acercar reproductor flotante a la caja central */
.player,
footer.player,
.player.panel{
  bottom:64px !important;
}

@media(max-width:820px){
  .player,
  footer.player,
  .player.panel{
    bottom:38px !important;
  }
}

@media(max-width:520px){
  .player,
  footer.player,
  .player.panel{
    bottom:30px !important;
  }
}


/* FIX — volumen más corto y diferenciado de la barra de tiempo */
.player-right{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:8px !important;
  min-width:0 !important;
  overflow:visible !important;
}

.player-right::before{
  content:"🔊";
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:24px !important;
  height:24px !important;
  border-radius:999px !important;
  background:rgba(240,201,106,.12) !important;
  border:1px solid rgba(240,201,106,.22) !important;
  color:var(--gold-hi) !important;
  font-size:13px !important;
  flex:0 0 auto !important;
}

#volumeBar{
  width:150px !important;
  max-width:150px !important;
  min-width:90px !important;
  height:6px !important;
  accent-color:#f0c96a !important;
  cursor:pointer !important;
  flex:0 0 150px !important;
}

#seekBar{
  accent-color:#1aa8ff !important;
}

@media(max-width:820px){
  .player-right{
    width:100% !important;
    justify-content:flex-end !important;
    padding-right:2px !important;
  }

  .player-right::before{
    width:22px !important;
    height:22px !important;
    font-size:12px !important;
  }

  #volumeBar{
    width:120px !important;
    max-width:120px !important;
    min-width:80px !important;
    flex:0 0 120px !important;
  }
}

@media(max-width:520px){
  #volumeBar{
    width:105px !important;
    max-width:105px !important;
    min-width:72px !important;
    flex:0 0 105px !important;
  }
}


/* =========================================================
   FIX FINAL — layout estable del reproductor + volumen alineado
   Objetivo:
   - Misma posición en audio y video.
   - Volumen corto y diferente.
   - Sin scroll horizontal.
   - Player flotante, pero no tan arriba.
   ========================================================= */

/* Desktop / notebook */
.player,
footer.player,
.player.panel{
  position:fixed !important;
  left:50% !important;
  right:auto !important;
  bottom:28px !important;
  transform:translateX(-50%) !important;
  width:min(1180px, calc(100vw - 24px)) !important;
  max-width:1180px !important;
  margin:0 !important;
  z-index:90 !important;

  display:grid !important;
  grid-template-columns:280px minmax(300px,1fr) 205px !important;
  align-items:center !important;
  gap:16px !important;
  overflow:visible !important;
}

.app{
  padding-bottom:128px !important;
}

/* La info del tema no debe mover los controles ni el volumen */
.now-playing{
  min-width:0 !important;
  align-self:center !important;
}

.player-center{
  min-width:0 !important;
  align-self:center !important;
}

.player-right{
  min-width:0 !important;
  width:205px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:8px !important;
  align-self:center !important;
  overflow:visible !important;
}

.player-right::before{
  content:"🔊";
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:24px !important;
  height:24px !important;
  border-radius:999px !important;
  background:rgba(240,201,106,.12) !important;
  border:1px solid rgba(240,201,106,.25) !important;
  color:var(--gold-hi) !important;
  font-size:13px !important;
  flex:0 0 24px !important;
}

#volumeBar{
  width:145px !important;
  max-width:145px !important;
  min-width:100px !important;
  flex:0 0 145px !important;
  height:6px !important;
  accent-color:#f0c96a !important;
  cursor:pointer !important;
}

#seekBar{
  width:100% !important;
  max-width:100% !important;
  accent-color:#1aa8ff !important;
}

html,
body{
  overflow-x:hidden !important;
}

/* Tablet: mantener el mismo orden, no mandar volumen abajo */
@media(max-width:820px) and (min-width:601px){
  .player,
  footer.player,
  .player.panel{
    left:50% !important;
    right:auto !important;
    bottom:22px !important;
    transform:translateX(-50%) !important;
    width:calc(100vw - 18px) !important;
    max-width:none !important;
    grid-template-columns:230px minmax(240px,1fr) 160px !important;
    gap:10px !important;
    padding:10px 12px !important;
    overflow:visible !important;
  }

  .player-right{
    width:160px !important;
    justify-content:flex-end !important;
  }

  .player-right::before{
    width:22px !important;
    height:22px !important;
    flex-basis:22px !important;
    font-size:12px !important;
  }

  #volumeBar{
    width:120px !important;
    max-width:120px !important;
    min-width:90px !important;
    flex-basis:120px !important;
  }

  .app{
    padding-bottom:122px !important;
  }
}

/* Celular real: sin overflow horizontal */
@media(max-width:600px){
  .player,
  footer.player,
  .player.panel{
    left:8px !important;
    right:8px !important;
    bottom:10px !important;
    transform:none !important;
    width:auto !important;
    max-width:none !important;
    grid-template-columns:1fr !important;
    gap:8px !important;
    padding:10px !important;
    overflow:hidden !important;
  }

  .now-playing{
    grid-template-columns:46px minmax(0,1fr) !important;
    width:100% !important;
    min-width:0 !important;
  }

  .mini-cover{
    width:46px !important;
    height:46px !important;
  }

  .player-center{
    width:100% !important;
    min-width:0 !important;
  }

  .progress-row{
    grid-template-columns:38px minmax(0,1fr) 38px !important;
    width:100% !important;
    min-width:0 !important;
  }

  .player-right{
    width:100% !important;
    display:flex !important;
    justify-content:flex-end !important;
    align-items:center !important;
    gap:7px !important;
    overflow:hidden !important;
  }

  .player-right::before{
    width:22px !important;
    height:22px !important;
    flex:0 0 22px !important;
    font-size:12px !important;
  }

  #volumeBar{
    width:110px !important;
    max-width:110px !important;
    min-width:80px !important;
    flex:0 0 110px !important;
    box-sizing:border-box !important;
  }

  .app{
    padding-bottom:210px !important;
  }
}


/* FIX — panel central estirado a la altura de la columna lateral */
@media(min-width:821px){
  .spotify-layout{
    align-items:stretch !important;
  }

  .main-panel,
  .main-panel.panel{
    align-self:stretch !important;
    height:100% !important;
    min-height:100% !important;
  }

  .sidebar,
  .sidebar.panel{
    height:auto !important;
  }
}


/* =========================================================
   FIX — reproductor visible en todos los tamaños móviles
   Corrige el corte entre 421px y 600px donde el player/volumen
   podía quedar fuera de pantalla o tapado.
   ========================================================= */

@media(max-width:600px){
  html,
  body{
    overflow-x:hidden !important;
  }

  .app{
    padding-bottom:230px !important;
  }

  .player,
  footer.player,
  .player.panel{
    display:grid !important;
    visibility:visible !important;
    opacity:1 !important;
    position:fixed !important;
    left:8px !important;
    right:8px !important;
    bottom:8px !important;
    top:auto !important;
    transform:none !important;
    width:auto !important;
    max-width:none !important;
    min-height:0 !important;
    max-height:none !important;
    grid-template-columns:1fr !important;
    grid-template-rows:auto auto auto !important;
    gap:8px !important;
    padding:10px !important;
    overflow:hidden !important;
    z-index:9990 !important;
  }

  .now-playing{
    display:grid !important;
    grid-template-columns:46px minmax(0,1fr) !important;
    width:100% !important;
    min-width:0 !important;
  }

  .mini-cover{
    width:46px !important;
    height:46px !important;
  }

  .now-title,
  .now-sub{
    min-width:0 !important;
    max-width:100% !important;
    overflow:hidden !important;
    white-space:nowrap !important;
    text-overflow:ellipsis !important;
  }

  .player-center{
    display:grid !important;
    width:100% !important;
    min-width:0 !important;
    gap:7px !important;
  }

  .player-controls{
    display:flex !important;
    justify-content:center !important;
    gap:8px !important;
  }

  .progress-row{
    display:grid !important;
    grid-template-columns:36px minmax(0,1fr) 36px !important;
    gap:6px !important;
    width:100% !important;
    min-width:0 !important;
  }

  .progress-row input,
  #seekBar{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }

  .player-right{
    display:flex !important;
    width:100% !important;
    min-width:0 !important;
    justify-content:flex-end !important;
    align-items:center !important;
    gap:7px !important;
    overflow:hidden !important;
  }

  .player-right::before{
    display:inline-flex !important;
    width:22px !important;
    height:22px !important;
    flex:0 0 22px !important;
    font-size:12px !important;
  }

  #volumeBar{
    display:block !important;
    width:110px !important;
    max-width:110px !important;
    min-width:80px !important;
    flex:0 0 110px !important;
    box-sizing:border-box !important;
  }
}

/* Ajuste específico para celulares angostos tipo 390–480px */
@media(max-width:480px){
  .app{
    padding-bottom:240px !important;
  }

  .player,
  footer.player,
  .player.panel{
    left:6px !important;
    right:6px !important;
    bottom:6px !important;
    padding:9px !important;
  }

  .player-main{
    width:44px !important;
    height:44px !important;
  }

  .player-btn{
    width:34px !important;
    height:34px !important;
  }

  #volumeBar{
    width:96px !important;
    max-width:96px !important;
    min-width:72px !important;
    flex-basis:96px !important;
  }
}

/* Cuando el alto disponible es chico, compactar un poco para que no desaparezca */
@media(max-width:600px) and (max-height:760px){
  .app{
    padding-bottom:210px !important;
  }

  .player,
  footer.player,
  .player.panel{
    gap:6px !important;
    padding:8px !important;
  }

  .mini-cover{
    width:42px !important;
    height:42px !important;
  }

  .now-playing{
    grid-template-columns:42px minmax(0,1fr) !important;
  }

  .player-main{
    width:42px !important;
    height:42px !important;
  }

  .player-btn{
    width:32px !important;
    height:32px !important;
  }
}


/* =========================================================
   FIX MOBILE FINAL — reproductor completo visible 360–600px
   - fuerza player a ocupar ancho real de pantalla
   - muestra controles, tiempo y volumen en filas separadas
   - evita que el volumen quede comprimido o fuera de caja
   ========================================================= */

@media(max-width:600px){
  html,
  body{
    overflow-x:hidden !important;
    max-width:100vw !important;
  }

  .app{
    padding-bottom:245px !important;
  }

  .player,
  footer.player,
  .player.panel{
    position:fixed !important;
    left:6px !important;
    right:6px !important;
    bottom:6px !important;
    top:auto !important;
    transform:none !important;
    width:auto !important;
    max-width:none !important;
    min-width:0 !important;
    min-height:154px !important;
    height:auto !important;
    max-height:none !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    grid-template-rows:auto auto auto !important;
    gap:7px !important;
    padding:9px 10px 10px !important;
    overflow:hidden !important;
    box-sizing:border-box !important;
    z-index:9999 !important;
  }

  .now-playing{
    display:grid !important;
    grid-template-columns:44px minmax(0,1fr) !important;
    gap:8px !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    align-items:center !important;
  }

  .mini-cover{
    width:44px !important;
    height:44px !important;
    border-radius:12px !important;
  }

  .now-title,
  .now-sub{
    min-width:0 !important;
    max-width:100% !important;
    overflow:hidden !important;
    white-space:nowrap !important;
    text-overflow:ellipsis !important;
  }

  .player-center{
    display:grid !important;
    grid-template-columns:1fr !important;
    grid-template-rows:auto auto !important;
    gap:6px !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
  }

  .player-controls{
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    gap:8px !important;
    width:100% !important;
  }

  .player-main{
    width:44px !important;
    height:44px !important;
    border-radius:15px !important;
  }

  .player-btn{
    width:34px !important;
    height:34px !important;
    border-radius:12px !important;
  }

  .progress-row{
    display:grid !important;
    grid-template-columns:36px minmax(0,1fr) 36px !important;
    gap:6px !important;
    align-items:center !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    height:auto !important;
    visibility:visible !important;
    opacity:1 !important;
  }

  .progress-row span{
    display:block !important;
    font-size:11px !important;
    line-height:1 !important;
  }

  .progress-row input,
  #seekBar{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    height:6px !important;
    accent-color:#1aa8ff !important;
  }

  .player-right{
    display:flex !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    justify-content:center !important;
    align-items:center !important;
    gap:8px !important;
    overflow:hidden !important;
    padding:0 !important;
    box-sizing:border-box !important;
  }

  .player-right::before{
    content:"🔊" !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:22px !important;
    height:22px !important;
    flex:0 0 22px !important;
    border-radius:999px !important;
    background:rgba(240,201,106,.12) !important;
    border:1px solid rgba(240,201,106,.25) !important;
    font-size:12px !important;
  }

  .player-right select{
    display:none !important;
  }

  #volumeBar{
    display:block !important;
    width:118px !important;
    max-width:118px !important;
    min-width:86px !important;
    flex:0 0 118px !important;
    height:6px !important;
    box-sizing:border-box !important;
    accent-color:#f0c96a !important;
  }
}

/* Celulares muy angostos */
@media(max-width:420px){
  .player,
  footer.player,
  .player.panel{
    left:5px !important;
    right:5px !important;
    bottom:5px !important;
    padding:8px !important;
    min-height:148px !important;
  }

  .mini-cover{
    width:40px !important;
    height:40px !important;
  }

  .now-playing{
    grid-template-columns:40px minmax(0,1fr) !important;
  }

  .player-main{
    width:42px !important;
    height:42px !important;
  }

  .player-btn{
    width:32px !important;
    height:32px !important;
  }

  #volumeBar{
    width:100px !important;
    max-width:100px !important;
    min-width:74px !important;
    flex-basis:100px !important;
  }
}

/* Altura chica: compacta sin esconder el volumen */
@media(max-width:600px) and (max-height:760px){
  .app{
    padding-bottom:220px !important;
  }

  .player,
  footer.player,
  .player.panel{
    min-height:140px !important;
    gap:5px !important;
  }

  .mini-cover{
    width:38px !important;
    height:38px !important;
  }

  .now-playing{
    grid-template-columns:38px minmax(0,1fr) !important;
  }
}


/* =========================================================
   FIX MOBILE DEFINITIVO — player compacto estable
   Decisión: en celular vertical se oculta el slider de volumen
   para evitar scroll horizontal y cortes. El volumen se maneja
   desde el teléfono. En tablet/horizontal sigue visible.
   ========================================================= */

@media(max-width:600px){
  html,
  body{
    overflow-x:hidden !important;
    max-width:100vw !important;
  }

  .app{
    padding-bottom:175px !important;
  }

  .player,
  footer.player,
  .player.panel{
    position:fixed !important;
    left:6px !important;
    right:6px !important;
    bottom:6px !important;
    top:auto !important;
    transform:none !important;
    width:auto !important;
    max-width:none !important;
    min-width:0 !important;
    min-height:0 !important;
    height:auto !important;

    display:grid !important;
    grid-template-columns:1fr !important;
    grid-template-rows:auto auto !important;
    gap:8px !important;

    padding:9px 10px 10px !important;
    overflow:hidden !important;
    box-sizing:border-box !important;
    z-index:9999 !important;
  }

  .now-playing{
    display:grid !important;
    grid-template-columns:42px minmax(0,1fr) !important;
    gap:8px !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    align-items:center !important;
  }

  .mini-cover{
    width:42px !important;
    height:42px !important;
    border-radius:12px !important;
  }

  .now-title,
  .now-sub{
    min-width:0 !important;
    max-width:100% !important;
    overflow:hidden !important;
    white-space:nowrap !important;
    text-overflow:ellipsis !important;
  }

  .player-meta-actions{
    margin-top:3px !important;
    gap:6px !important;
  }

  .artist-mini-link,
  .player-video-big-toggle{
    height:20px !important;
    min-height:20px !important;
    padding:0 7px !important;
    font-size:9px !important;
  }

  .player-center{
    display:grid !important;
    grid-template-columns:1fr !important;
    grid-template-rows:auto auto !important;
    gap:6px !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
  }

  .player-controls{
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    gap:8px !important;
    width:100% !important;
  }

  .player-main{
    width:42px !important;
    height:42px !important;
    border-radius:15px !important;
  }

  .player-btn{
    width:32px !important;
    height:32px !important;
    border-radius:12px !important;
  }

  .progress-row{
    display:grid !important;
    grid-template-columns:34px minmax(0,1fr) 34px !important;
    gap:6px !important;
    align-items:center !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }

  .progress-row span{
    display:block !important;
    font-size:10px !important;
    line-height:1 !important;
  }

  .progress-row input,
  #seekBar{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    height:6px !important;
    accent-color:#1aa8ff !important;
  }

  .player-right{
    display:none !important;
  }

  #volumeBar{
    display:none !important;
  }
}

/* En horizontal/tablet se mantiene volumen visible */
@media(min-width:601px){
  .player-right{
    display:flex !important;
  }

  #volumeBar{
    display:block !important;
  }
}


/* =========================================================
   FIX FINAL REAL — MOBILE PLAYER + VIDEO
   Soluciona:
   - El volumen NO aparece en celular vertical.
   - El volumen NO pisa el play.
   - El player entra completo entre 360px y 600px.
   - El video se ve en celular cuando se toca "Ver video".
   ========================================================= */

@media screen and (max-width:600px){
  html,
  body{
    width:100% !important;
    max-width:100vw !important;
    overflow-x:hidden !important;
  }

  .app{
    padding-bottom:168px !important;
  }

  .player,
  footer.player,
  .player.panel,
  body .player.panel{
    position:fixed !important;
    left:6px !important;
    right:6px !important;
    bottom:6px !important;
    top:auto !important;
    transform:none !important;
    width:auto !important;
    max-width:none !important;
    min-width:0 !important;
    min-height:0 !important;
    height:auto !important;
    max-height:none !important;

    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    gap:7px !important;

    padding:9px 10px 10px !important;
    overflow:hidden !important;
    box-sizing:border-box !important;
    z-index:9999 !important;
  }

  .player .now-playing,
  footer.player .now-playing,
  .player.panel .now-playing{
    order:1 !important;
    display:grid !important;
    grid-template-columns:42px minmax(0,1fr) !important;
    align-items:center !important;
    gap:8px !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }

  .player .mini-cover{
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    border-radius:12px !important;
  }

  .player .now-title,
  .player .now-sub{
    min-width:0 !important;
    max-width:100% !important;
    overflow:hidden !important;
    white-space:nowrap !important;
    text-overflow:ellipsis !important;
  }

  .player .player-meta-actions{
    margin-top:3px !important;
    gap:6px !important;
  }

  .player .artist-mini-link,
  .player .player-video-big-toggle{
    height:20px !important;
    min-height:20px !important;
    padding:0 7px !important;
    font-size:9px !important;
    line-height:1 !important;
  }

  .player .player-center,
  footer.player .player-center,
  .player.panel .player-center{
    order:2 !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    gap:6px !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }

  .player .player-controls{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:8px !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }

  .player .player-main{
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    border-radius:15px !important;
  }

  .player .player-btn{
    width:32px !important;
    height:32px !important;
    min-width:32px !important;
    border-radius:12px !important;
  }

  .player .progress-row{
    display:grid !important;
    grid-template-columns:34px minmax(0,1fr) 34px !important;
    align-items:center !important;
    gap:6px !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    visibility:visible !important;
    opacity:1 !important;
  }

  .player .progress-row span{
    display:block !important;
    font-size:10px !important;
    line-height:1 !important;
    min-width:0 !important;
    overflow:hidden !important;
    color:#c7d3e8 !important;
  }

  .player .progress-row input,
  .player #seekBar,
  #seekBar{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    height:6px !important;
    box-sizing:border-box !important;
    accent-color:#1aa8ff !important;
  }

  .player .player-right,
  footer.player .player-right,
  .player.panel .player-right,
  .player-right{
    display:none !important;
    visibility:hidden !important;
    opacity:0 !important;
    width:0 !important;
    height:0 !important;
    min-width:0 !important;
    max-width:0 !important;
    overflow:hidden !important;
    pointer-events:none !important;
  }

  #volumeBar,
  .player #volumeBar,
  footer.player #volumeBar,
  .player.panel #volumeBar{
    display:none !important;
    visibility:hidden !important;
    opacity:0 !important;
    width:0 !important;
    max-width:0 !important;
    min-width:0 !important;
    height:0 !important;
    flex:0 0 0 !important;
    pointer-events:none !important;
  }

  #playerVideoDock.player-video-dock:not(.hidden):not(.audio-compact),
  .player-video-dock:not(.hidden):not(.audio-compact){
    display:block !important;
    position:fixed !important;
    left:10px !important;
    right:10px !important;
    bottom:144px !important;
    top:auto !important;
    width:auto !important;
    max-width:none !important;
    transform:none !important;
    z-index:10050 !important;
    border-radius:14px !important;
    overflow:hidden !important;
  }

  #playerVideoDock.player-video-dock:not(.hidden):not(.audio-compact) .player-video-body,
  .player-video-dock:not(.hidden):not(.audio-compact) .player-video-body{
    width:100% !important;
    aspect-ratio:16/9 !important;
    max-height:34vh !important;
    background:#02040a !important;
  }

  #playerVideoDock.player-video-dock:not(.hidden):not(.audio-compact) iframe,
  .player-video-dock:not(.hidden):not(.audio-compact) iframe{
    display:block !important;
    width:100% !important;
    height:100% !important;
    border:0 !important;
  }
}

/* Celular muy angosto */
@media screen and (max-width:420px){
  .app{
    padding-bottom:160px !important;
  }

  .player,
  footer.player,
  .player.panel,
  body .player.panel{
    left:5px !important;
    right:5px !important;
    bottom:5px !important;
    padding:8px !important;
    gap:6px !important;
  }

  .player .now-playing{
    grid-template-columns:38px minmax(0,1fr) !important;
  }

  .player .mini-cover{
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
  }

  .player .player-main{
    width:40px !important;
    height:40px !important;
    min-width:40px !important;
  }

  .player .player-btn{
    width:30px !important;
    height:30px !important;
    min-width:30px !important;
  }

  .player .progress-row{
    grid-template-columns:32px minmax(0,1fr) 32px !important;
    gap:5px !important;
  }

  #playerVideoDock.player-video-dock:not(.hidden):not(.audio-compact),
  .player-video-dock:not(.hidden):not(.audio-compact){
    left:8px !important;
    right:8px !important;
    bottom:136px !important;
  }
}

/* Altura baja: compactar video y player sin ocultar controles */
@media screen and (max-width:600px) and (max-height:700px){
  .app{
    padding-bottom:148px !important;
  }

  .player,
  footer.player,
  .player.panel,
  body .player.panel{
    padding:7px 8px !important;
    gap:5px !important;
  }

  .player .now-playing{
    grid-template-columns:36px minmax(0,1fr) !important;
  }

  .player .mini-cover{
    width:36px !important;
    height:36px !important;
    min-width:36px !important;
  }

  .player .player-main{
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
  }

  .player .player-btn{
    width:28px !important;
    height:28px !important;
    min-width:28px !important;
  }

  #playerVideoDock.player-video-dock:not(.hidden):not(.audio-compact),
  .player-video-dock:not(.hidden):not(.audio-compact){
    bottom:126px !important;
  }

  #playerVideoDock.player-video-dock:not(.hidden):not(.audio-compact) .player-video-body,
  .player-video-dock:not(.hidden):not(.audio-compact) .player-video-body{
    max-height:30vh !important;
  }
}


/* =========================================================
   FIX — video móvil como ventana emergente sin clipping
   Problema: el dock de video quedaba dentro del footer/player
   y se veía como una línea fina por overflow/altura.
   Solución: cuando el video está desplegado, el player permite
   overflow visible y el video se dibuja como modal fijo.
   ========================================================= */

@media screen and (max-width:600px){
  .player.has-video,
  footer.player.has-video,
  .player.panel.has-video{
    overflow:visible !important;
  }

  #playerVideoDock.player-video-dock:not(.hidden):not(.audio-compact),
  #playerVideoDock.player-video-dock.expanded:not(.hidden):not(.audio-compact),
  #playerVideoDock.player-video-dock.collapsed.expanded:not(.hidden):not(.audio-compact),
  .player-video-dock:not(.hidden):not(.audio-compact){
    display:block !important;
    position:fixed !important;

    left:12px !important;
    right:12px !important;
    top:17vh !important;
    bottom:auto !important;

    width:auto !important;
    max-width:none !important;
    height:auto !important;
    min-height:0 !important;
    max-height:70vh !important;

    transform:none !important;
    z-index:10080 !important;

    overflow:visible !important;
    border-radius:16px !important;
    border:1px solid rgba(240,201,106,.34) !important;
    background:linear-gradient(180deg,rgba(4,11,28,.98),rgba(6,16,42,.98)) !important;
    box-shadow:0 24px 80px rgba(0,0,0,.72) !important;
  }

  #playerVideoDock .player-video-head,
  .player-video-dock .player-video-head{
    display:flex !important;
    height:32px !important;
    min-height:32px !important;
    align-items:center !important;
    padding:0 9px 0 12px !important;
    border-bottom:1px solid rgba(255,255,255,.10) !important;
    background:rgba(5,12,32,.92) !important;
  }

  #playerVideoDock .player-video-head span,
  .player-video-dock .player-video-head span{
    display:block !important;
    opacity:1 !important;
    visibility:visible !important;
    color:var(--gold-hi) !important;
    font:900 10px/1 'Rajdhani',sans-serif !important;
    letter-spacing:.12em !important;
    text-transform:uppercase !important;
  }

  #playerVideoClose{
    display:grid !important;
    place-items:center !important;
    width:26px !important;
    height:26px !important;
    min-width:26px !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    border-radius:50% !important;
    border:1px solid rgba(255,255,255,.18) !important;
    background:rgba(255,255,255,.08) !important;
    color:#fff !important;
  }

  #playerVideoDock .player-video-body,
  .player-video-dock .player-video-body{
    display:block !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    aspect-ratio:16/9 !important;
    background:#02040a !important;
    overflow:hidden !important;
    border-radius:0 0 16px 16px !important;
  }

  #playerVideoDock .player-video-body iframe,
  .player-video-dock .player-video-body iframe{
    display:block !important;
    width:100% !important;
    height:100% !important;
    min-height:190px !important;
    border:0 !important;
    opacity:1 !important;
    visibility:visible !important;
  }

  #playerVideoDock .player-video-official,
  .player-video-dock .player-video-official{
    display:none !important;
  }
}

@media screen and (max-width:420px){
  #playerVideoDock.player-video-dock:not(.hidden):not(.audio-compact),
  #playerVideoDock.player-video-dock.expanded:not(.hidden):not(.audio-compact),
  .player-video-dock:not(.hidden):not(.audio-compact){
    left:8px !important;
    right:8px !important;
    top:15vh !important;
    max-height:72vh !important;
  }

  #playerVideoDock .player-video-body iframe,
  .player-video-dock .player-video-body iframe{
    min-height:175px !important;
  }
}


/* =========================================================
   FIX — video móvil arriba del reproductor
   El dock vive dentro del footer/player. En móvil lo dejamos
   absoluto respecto al reproductor para que suba encima del player
   y no quede pegado abajo.
   ========================================================= */

@media screen and (max-width:600px){
  .player.has-video,
  footer.player.has-video,
  .player.panel.has-video,
  footer.player,
  .player.panel{
    overflow:visible !important;
  }

  body #playerVideoDock.player-video-dock.expanded:not(.hidden):not(.audio-compact),
  body #playerVideoDock.player-video-dock.collapsed.expanded:not(.hidden):not(.audio-compact),
  body #playerVideoDock.player-video-dock:not(.hidden):not(.audio-compact){
    display:block !important;
    position:absolute !important;

    left:50% !important;
    right:auto !important;
    top:auto !important;
    bottom:calc(100% + 12px) !important;

    transform:translateX(-50%) !important;
    width:calc(100vw - 24px) !important;
    max-width:420px !important;
    height:auto !important;
    max-height:none !important;

    z-index:10080 !important;
    overflow:hidden !important;
    border-radius:16px !important;
    border:1px solid rgba(240,201,106,.34) !important;
    background:linear-gradient(180deg,rgba(4,11,28,.98),rgba(6,16,42,.98)) !important;
    box-shadow:0 24px 80px rgba(0,0,0,.72) !important;
  }

  body #playerVideoDock .player-video-head{
    display:flex !important;
    height:32px !important;
    min-height:32px !important;
    align-items:center !important;
    padding:0 9px 0 12px !important;
    border-bottom:1px solid rgba(255,255,255,.10) !important;
    background:rgba(5,12,32,.94) !important;
  }

  body #playerVideoDock .player-video-body{
    display:block !important;
    width:100% !important;
    aspect-ratio:16/9 !important;
    min-height:0 !important;
    max-height:34vh !important;
    background:#02040a !important;
    overflow:hidden !important;
  }

  body #playerVideoDock .player-video-body iframe{
    display:block !important;
    width:100% !important;
    height:100% !important;
    min-height:180px !important;
    border:0 !important;
    opacity:1 !important;
    visibility:visible !important;
  }
}

@media screen and (max-width:420px){
  body #playerVideoDock.player-video-dock.expanded:not(.hidden):not(.audio-compact),
  body #playerVideoDock.player-video-dock.collapsed.expanded:not(.hidden):not(.audio-compact),
  body #playerVideoDock.player-video-dock:not(.hidden):not(.audio-compact){
    width:calc(100vw - 16px) !important;
    bottom:calc(100% + 10px) !important;
    max-width:none !important;
  }

  body #playerVideoDock .player-video-body iframe{
    min-height:165px !important;
  }
}


/* FIX — leyenda inferior de curaduría / fuentes oficiales */
.umbanda-legal-notice{
  width:min(1180px, calc(100% - 24px));
  margin:24px auto 150px;
  padding:16px 18px;
  border:1px solid rgba(240,201,106,.22);
  border-radius:18px;
  background:linear-gradient(180deg, rgba(10,22,55,.82), rgba(6,15,38,.78));
  color:#cbd6ea;
  box-shadow:0 18px 48px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.04);
  font-size:13px;
  line-height:1.55;
}

.umbanda-legal-notice strong{
  display:block;
  margin-bottom:6px;
  color:var(--gold-hi, #f0c96a);
  font-family:'Cinzel', serif;
  font-size:14px;
  letter-spacing:.04em;
}

.umbanda-legal-notice span{
  display:block;
  opacity:.92;
}

@media(max-width:820px){
  .umbanda-legal-notice{
    width:calc(100% - 18px);
    margin:18px auto 190px;
    padding:13px 14px;
    border-radius:15px;
    font-size:12px;
  }

  .umbanda-legal-notice strong{
    font-size:13px;
  }
}

@media(max-width:600px){
  .umbanda-legal-notice{
    margin-bottom:178px;
  }
}


/* FIX — leyenda como pie de página real, no entre contenido y reproductor */
#umbandaLegalNotice.umbanda-legal-notice{
  display:block !important;
  width:min(1180px, calc(100% - 24px)) !important;
  margin:28px auto 122px !important;
  padding:12px 16px !important;
  border:1px solid rgba(240,201,106,.18) !important;
  border-radius:14px !important;
  background:rgba(8,18,44,.58) !important;
  color:#aebbd3 !important;
  box-shadow:none !important;
  font-size:12px !important;
  line-height:1.45 !important;
}

#umbandaLegalNotice.umbanda-legal-notice strong{
  display:block !important;
  margin-bottom:4px !important;
  color:var(--gold-hi, #f0c96a) !important;
  font-family:'Cinzel', serif !important;
  font-size:12px !important;
  letter-spacing:.04em !important;
}

#umbandaLegalNotice.umbanda-legal-notice span{
  display:block !important;
  opacity:.86 !important;
}

@media(max-width:820px){
  #umbandaLegalNotice.umbanda-legal-notice{
    width:calc(100% - 18px) !important;
    margin:18px auto 168px !important;
    padding:10px 12px !important;
    border-radius:12px !important;
    font-size:11px !important;
  }

  #umbandaLegalNotice.umbanda-legal-notice strong{
    font-size:11px !important;
  }
}


/* FIX — aviso legal como enlace discreto en el reproductor */
#umbandaLegalNotice{
  display:none !important;
}

.umbanda-legal-open{
  position:absolute;
  left:76px;
  bottom:8px;
  z-index:4;
  border:0;
  background:transparent;
  color:rgba(240,201,106,.78);
  font:700 10px/1 'Rajdhani', sans-serif;
  letter-spacing:.06em;
  text-transform:uppercase;
  cursor:pointer;
  padding:3px 0;
  opacity:.76;
}

.umbanda-legal-open:hover{
  opacity:1;
  color:var(--gold-hi, #f0c96a);
  text-decoration:underline;
}

.umbanda-legal-modal.hidden{
  display:none !important;
}

.umbanda-legal-modal{
  position:fixed;
  inset:0;
  z-index:12000;
  display:grid;
  place-items:center;
  padding:22px;
}

.umbanda-legal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.64);
  backdrop-filter:blur(7px);
}

.umbanda-legal-dialog{
  position:relative;
  width:min(720px, calc(100vw - 34px));
  max-height:calc(100vh - 48px);
  overflow:auto;
  border:1px solid rgba(240,201,106,.26);
  border-radius:22px;
  background:linear-gradient(180deg, rgba(10,22,55,.98), rgba(5,12,32,.98));
  color:#dce6f7;
  box-shadow:0 30px 100px rgba(0,0,0,.72), inset 0 0 0 1px rgba(255,255,255,.04);
  padding:26px 28px 24px;
}

.umbanda-legal-close{
  position:absolute;
  top:14px;
  right:14px;
  width:36px;
  height:36px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.08);
  color:#fff;
  font-size:24px;
  line-height:1;
  cursor:pointer;
}

.umbanda-legal-kicker{
  color:var(--gold-hi, #f0c96a);
  font:900 11px/1 'Rajdhani', sans-serif;
  letter-spacing:.16em;
  text-transform:uppercase;
  margin-bottom:10px;
}

.umbanda-legal-dialog h2{
  margin:0 46px 14px 0;
  color:var(--gold-hi, #f0c96a);
  font-family:'Cinzel', serif;
  font-size:25px;
  line-height:1.1;
}

.umbanda-legal-dialog p{
  margin:0 0 12px;
  color:#cbd6ea;
  font-size:14px;
  line-height:1.65;
}

@media(max-width:820px){
  .umbanda-legal-open{
    left:58px;
    bottom:5px;
    font-size:9px;
  }

  .umbanda-legal-dialog{
    padding:22px 18px 20px;
    border-radius:18px;
  }

  .umbanda-legal-dialog h2{
    font-size:20px;
  }

  .umbanda-legal-dialog p{
    font-size:13px;
  }
}

@media(max-width:600px){
  .umbanda-legal-open{
    position:static;
    display:inline-flex;
    width:max-content;
    margin-top:3px;
    font-size:9px;
  }
}


/* FIX — separar Info del artista del enlace Aviso en reproductor PC */
@media(min-width:821px){
  .player .now-playing,
  footer.player .now-playing,
  .player.panel .now-playing{
    position:relative !important;
    padding-bottom:18px !important;
  }

  .player .player-meta-actions,
  footer.player .player-meta-actions,
  .player.panel .player-meta-actions{
    margin-top:7px !important;
    display:flex !important;
    align-items:center !important;
    gap:8px !important;
    flex-wrap:wrap !important;
  }

  .player .artist-mini-link,
  footer.player .artist-mini-link,
  .player.panel .artist-mini-link{
    position:relative !important;
    z-index:5 !important;
    display:inline-flex !important;
    align-items:center !important;
    width:max-content !important;
    margin-top:0 !important;
  }

  #umbandaLegalOpen.umbanda-legal-open{
    left:76px !important;
    bottom:2px !important;
    z-index:3 !important;
    font-size:9px !important;
    opacity:.56 !important;
  }

  #umbandaLegalOpen.umbanda-legal-open:hover{
    opacity:1 !important;
  }
}

@media(max-width:820px){
  .player .player-meta-actions,
  footer.player .player-meta-actions,
  .player.panel .player-meta-actions{
    gap:6px !important;
  }

  #umbandaLegalOpen.umbanda-legal-open{
    opacity:.62 !important;
  }
}


/* FIX DEFINITIVO — botón Ver video oculto por defecto */
#playerVideoBigToggle,
.player-video-big-toggle{
  display:none !important;
}

footer.player.has-real-video #playerVideoBigToggle,
.player.panel.has-real-video #playerVideoBigToggle,
.player.has-real-video #playerVideoBigToggle,
footer.player.has-real-video .player-video-big-toggle,
.player.panel.has-real-video .player-video-big-toggle,
.player.has-real-video .player-video-big-toggle{
  display:inline-flex !important;
}