@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root{
 --bg:#030207;
 --panel:#08050d;
 --panel2:#0d0812;
 --line:#5d1445;
 --pink:#8c0000;
 --pink2:#ff2daa;
 --purple:#c58b32;
 --yellow:#ffd522;
 --text:#fff;
 --muted:#9e919f;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
 margin:0;
 background:#020206;
 color:var(--text);
 font-family:Inter,Arial,sans-serif;
 padding-bottom:76px;
 overflow-x:hidden;
}
img{width:100%;height:100%;display:block;object-fit:cover}
button,input,select,textarea{font:inherit}
a{color:inherit}

body:before,body:after{
 content:"";
 position:fixed;
 z-index:-1;
 width:3px;
 height:60vh;
 background:linear-gradient(var(--pink),var(--yellow),var(--purple));
 box-shadow:0 0 24px rgba(255,0,145,.8);
 transform:rotate(42deg);
}
body:before{left:10px;top:12vh}
body:after{right:10px;bottom:10vh}

.site{
 width:min(1510px,calc(100% - 20px));
 margin:0 auto;
 background:linear-gradient(180deg,#050309,#030207);
 border-left:1px solid rgba(255,10,135,.35);
 border-right:1px solid rgba(255,10,135,.35);
 min-height:100vh;
 box-shadow:0 0 100px rgba(255,0,130,.08);
}

.topbar{
 height:68px;
 display:flex;
 align-items:center;
 gap:18px;
 padding:0 22px;
 border-bottom:1px solid #341128;
 background:#050309;
 position:sticky;
 top:0;
 z-index:50;
}

.logo{
 display:flex;
 align-items:center;
 gap:6px;
 text-decoration:none;
 flex:0 0 auto;
}
.logo-mark{
 font-size:38px;
 font-weight:900;
 color:var(--yellow);
 text-shadow:0 0 16px rgba(255,213,34,.5);
}
.logo-text{
 font-size:13px;
 font-weight:900;
 line-height:.8;
}
.logo-text>span{color:var(--pink)}
.logo-text small{
 display:block;
 color:#f534a5;
 font-size:6px;
 letter-spacing:2px;
 margin-top:6px;
}

.topbar nav{
 display:flex;
 align-items:center;
 gap:4px;
 flex:1 1 auto;
 min-width:0;
 overflow:hidden;
}
.topbar nav a{
 text-decoration:none;
 color:#e8e1e8;
 font-size:9px;
 font-weight:800;
 padding:10px 12px;
 border-radius:7px;
 white-space:nowrap;
}
.topbar nav a:hover,.topbar nav a.active{
 background:var(--pink);
 box-shadow:0 0 22px rgba(255,10,135,.3);
}

.top-search{
 display:flex;
 width:320px;
 flex:0 0 320px;
 border:1px solid #4e123d;
 border-radius:9px;
 overflow:hidden;
 background:#08050d;
}
.top-search input{
 flex:1;
 min-width:0;
 border:0;
 outline:0;
 background:transparent;
 color:#fff;
 padding:10px 12px;
 font-size:9px;
}
.top-search button{
 width:44px;
 border:0;
 background:var(--pink);
 color:#fff;
 font-size:18px;
}

.layout{
 display:grid;
 grid-template-columns:minmax(0,1fr) 320px;
 gap:16px;
 padding:14px 20px 26px;
 align-items:start;
}

.main,.sidebar{min-width:0}

.hero-grid{
 display:grid;
 grid-template-columns:minmax(340px,1.75fr) repeat(3,minmax(0,1fr));
 gap:9px;
 margin-bottom:14px;
}
.ad-card,.feature-card{
 min-width:0;
 height:174px;
 border:1px solid #8c1457;
 border-radius:12px;
 overflow:hidden;
 position:relative;
 background:#100515;
}

.ad-card{
 display:flex;
 align-items:center;
 gap:18px;
 padding:20px 26px;
 background:
 radial-gradient(circle at 35% 45%,rgba(124,25,255,.32),transparent 36%),
 radial-gradient(circle at 74% 30%,rgba(255,0,130,.22),transparent 24%),
 linear-gradient(120deg,#120317,#26052d);
}
.ad-card:before,.ad-card:after{
 content:"";
 position:absolute;
 border:1px solid rgba(255,0,145,.35);
 border-radius:50%;
 width:220px;height:220px;
 right:-40px;top:-50px;
}
.ad-card:after{width:155px;height:155px;right:17px;top:10px}
.ad-note{font-size:34px}
.ad-copy{position:relative;z-index:2}
.ad-copy span{font-size:7px;letter-spacing:2px;color:#ddd}
.ad-copy h1{font-size:28px;line-height:.88;margin:7px 0 10px}
.ad-copy h1 strong{font-size:48px;color:var(--pink);font-style:italic}
.ad-copy a{
 display:inline-block;
 background:var(--yellow);
 color:#111;
 text-decoration:none;
 padding:6px 13px;
 border-radius:14px;
 font-size:7px;
 font-weight:900;
}

.feature-image,.feature-shade{position:absolute;inset:0}
.feature-image{display:grid;place-items:center;font-size:34px;background:linear-gradient(135deg,#25082f,#f0067d)}
.feature-shade{background:linear-gradient(transparent 35%,rgba(2,1,4,.97))}
.feature-copy{
 position:absolute;
 left:11px;right:10px;bottom:11px;
}
.feature-copy small,.feature-copy b,.feature-copy span{display:block}
.feature-copy small{font-size:7px;font-weight:900}
.feature-copy b{font-size:10px;margin:4px 0}
.feature-copy span{font-size:7px;color:#c0b5c1}
.feature-placeholder{height:100%;display:grid;place-items:center;font-size:34px;color:var(--pink)}

.block{margin:14px 0 18px}
.section-title{
 display:flex;
 align-items:center;
 gap:12px;
 margin-bottom:10px;
}
.section-title i{
 flex:1;
 height:2px;
 background:linear-gradient(90deg,transparent,var(--yellow),var(--pink),transparent);
}
.section-title h2{
 margin:0;
 font-size:14px;
 white-space:nowrap;
}

.top-grid{
 display:grid;
 grid-template-columns:repeat(5,minmax(0,1fr));
 gap:9px;
}
.top-item{
 position:relative;
 min-width:0;
 display:grid;
 grid-template-columns:44px minmax(0,1fr) 26px;
 align-items:center;
 gap:8px;
 padding:8px;
 border:1px solid #492727;
 border-radius:10px;
 background:#09060e;
}
.rank{
 position:absolute;
 left:-2px;top:-2px;
 width:22px;height:22px;
 border-radius:6px;
 display:grid;place-items:center;
 background:var(--pink);
 font-size:9px;
 font-weight:900;
}
.thumb{
 width:44px;height:44px;
 border-radius:6px;
 overflow:hidden;
 display:grid;place-items:center;
 background:linear-gradient(135deg,#46105d,#f20b7d);
}
.track-info{min-width:0}
.track-info b,.track-info span,.track-info small{
 display:block;
 white-space:nowrap;
 overflow:hidden;
 text-overflow:ellipsis;
}
.track-info b{font-size:8px}
.track-info span{font-size:7px;color:#c0b4c3;margin:3px 0}
.track-info small{font-size:6px;color:#958995}
.round-btn{
 width:25px;height:25px;
 border:0;
 border-radius:50%;
 background:var(--pink);
 color:#fff;
 font-size:8px;
}

.search-box{
 display:flex;
 align-items:center;
 gap:10px;
 padding:5px 7px 5px 14px;
 margin:12px 0 14px;
 border:1px solid #9b145a;
 border-radius:18px;
 background:#08050d;
}
.search-box>span{color:var(--pink);font-size:20px}
.search-box form{display:flex;flex:1;min-width:0}
.search-box input{
 flex:1;
 min-width:0;
 background:#100817;
 border:1px solid #511442;
 border-radius:9px 0 0 9px;
 color:#fff;
 outline:0;
 padding:9px 11px;
 font-size:8px;
}
.search-box button{
 border:0;
 background:var(--pink);
 color:#fff;
 padding:0 20px;
 border-radius:0 8px 8px 0;
 font-size:8px;
 font-weight:900;
}

.card-grid{
 display:grid;
 grid-template-columns:repeat(6,minmax(0,1fr));
 gap:9px;
}
.music-card{
 min-width:0;
 overflow:hidden;
 border:1px solid #492727;
 border-radius:9px;
 background:#08050d;
}
.cover{
 position:relative;
 width:100%;
 aspect-ratio:1.22/1;
 overflow:hidden;
 display:grid;place-items:center;
 background:linear-gradient(135deg,#260738,#e80778);
 font-size:28px;
}
.cover:after{
 content:"";
 position:absolute;
 left:0;right:0;bottom:0;
 height:35%;
 background:linear-gradient(transparent,#07050a);
 pointer-events:none;
}
.cover button{
 position:absolute;
 right:7px;bottom:7px;
 z-index:2;
 width:24px;height:24px;
 border:0;border-radius:50%;
 background:var(--pink);
 color:#fff;
 font-size:8px;
}
.album-cover{aspect-ratio:1.12/1}
.music-meta{padding:8px}
.music-meta b,.music-meta span,.music-meta small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.music-meta b{font-size:8px}
.music-meta span{font-size:7px;color:#c0b3c3;margin:3px 0}
.music-meta small{font-size:6px;color:#8e818f}
.music-meta>div{display:flex;gap:8px;margin-top:5px}
.music-meta em{font-style:normal;font-size:6px;color:#ff55ae}
.mix-card .cover{aspect-ratio:1.35/1}

.press-empty{
 border:1px dashed #4f153d;
 border-radius:10px;
 padding:30px;
 text-align:center;
 color:#8d818e;
 font-size:9px;
}

.sidebar{
 display:flex;
 flex-direction:column;
 gap:10px;
}
.panel{
 border:1px solid #492727;
 border-radius:10px;
 background:#07050c;
 padding:11px;
}
.panel-title{
 display:flex;
 align-items:center;
 gap:8px;
 margin-bottom:9px;
}
.panel-title b{font-size:9px;white-space:nowrap}
.panel-title i{
 flex:1;
 height:2px;
 background:linear-gradient(90deg,var(--pink),var(--yellow));
}

.stat-grid{
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:8px;
}
.stat-grid>div{
 min-width:0;
 padding:10px;
 border:1px solid #492727;
 border-radius:9px;
 position:relative;
}
.stat-grid>div>span{
 position:absolute;
 left:9px;top:10px;
 color:var(--pink);
 font-size:19px;
}
.stat-grid small,.stat-grid b,.stat-grid em{
 display:block;
 margin-left:28px;
}
.stat-grid small{font-size:6px;color:#b4a8b6}
.stat-grid b{font-size:16px;margin-top:3px}
.stat-grid em{font-style:normal;font-size:7px;color:#9b8f9d}

.side-list{display:grid}
.side-row,.latest-row{
 min-width:0;
 display:grid;
 align-items:center;
 gap:7px;
 padding:7px 0;
 border-bottom:1px solid #1f111d;
}
.side-row{grid-template-columns:18px 34px minmax(0,1fr) auto}
.latest-row{grid-template-columns:34px minmax(0,1fr) auto}
.side-rank{
 width:18px;height:18px;
 border-radius:5px;
 display:grid;place-items:center;
 background:var(--pink);
 font-size:8px;
 font-weight:900;
}
.side-thumb{
 width:34px;height:34px;
 border-radius:5px;
 overflow:hidden;
 display:grid;place-items:center;
 background:linear-gradient(135deg,#3b1717,#8c0000);
}
.side-copy{min-width:0}
.side-copy b,.side-copy span{
 display:block;
 white-space:nowrap;
 overflow:hidden;
 text-overflow:ellipsis;
}
.side-copy b{font-size:8px}
.side-copy span{font-size:6px;color:#a99cab;margin-top:3px}
.side-row small,.latest-row small{font-size:6px;color:#aaa}

footer{
 padding:24px 20px;
 text-align:center;
 border-top:1px solid #2d1027;
 color:#817583;
 font-size:8px;
}

.player{
 position:fixed;
 left:50%;bottom:0;
 transform:translateX(-50%);
 width:min(1510px,calc(100% - 20px));
 height:68px;
 display:grid;
 grid-template-columns:230px auto minmax(180px,1fr) 85px 145px;
 align-items:center;
 gap:14px;
 padding:8px 20px;
 z-index:70;
 background:rgba(5,3,9,.97);
 border-top:1px solid #3a102f;
 backdrop-filter:blur(15px);
}
.player-track{
 min-width:0;
 display:flex;
 align-items:center;
 gap:9px;
}
.player-cover{
 width:48px;height:48px;
 flex:0 0 48px;
 border-radius:6px;
 overflow:hidden;
 display:grid;place-items:center;
 background:linear-gradient(135deg,#42105a,#f2087c);
}
.player-track>div:last-child{min-width:0}
.player-track b,.player-track span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player-track b{font-size:9px}
.player-track span{font-size:7px;color:#9d919f;margin-top:4px}
.player-controls{display:flex;gap:7px;align-items:center}
.player-controls button{border:0;background:transparent;color:#fff}
.player-controls .main-play{
 width:40px;height:40px;
 border-radius:50%;
 background:var(--pink);
 box-shadow:0 0 18px rgba(255,10,135,.28);
}
.progress input,.volume input{width:100%;accent-color:var(--pink)}
.time{font-size:7px;color:#bbb}
.volume{display:flex;align-items:center;gap:6px;font-size:10px}

.search-page .topbar{position:static}
.search-main{padding:24px}
.back{margin-left:auto;text-decoration:none;color:#aaa;font-size:9px}
.inner-search{margin-bottom:18px}
.download-link{display:inline-block;margin-top:7px;color:#ff47a6;text-decoration:none;font-size:7px;font-weight:800}

@media(max-width:1280px){
 .top-search{width:230px;flex-basis:230px}
 .layout{grid-template-columns:minmax(0,1fr) 285px}
 .hero-grid{grid-template-columns:minmax(300px,1.6fr) repeat(3,minmax(0,1fr))}
 .card-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
 .top-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
 .player{grid-template-columns:200px auto 1fr 75px 110px}
}

@media(max-width:1000px){
 .topbar nav a:nth-last-child(-n+2){display:none}
 .layout{grid-template-columns:1fr}
 .sidebar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
 .hero-grid{grid-template-columns:minmax(300px,1.5fr) repeat(2,minmax(0,1fr))}
 .hero-grid .feature-card:last-child{display:none}
 .player{grid-template-columns:190px auto 1fr 75px}
 .volume{display:none}
}

@media(max-width:800px){
 .site{width:100%;border:0}
 .topbar nav{display:none}
 .top-search{margin-left:auto;width:250px;flex-basis:250px}
 .layout{padding:12px}
 .sidebar{grid-template-columns:1fr}
 .hero-grid{grid-template-columns:1fr 1fr}
 .ad-card{grid-column:1/-1}
 .hero-grid .feature-card:last-child{display:block}
 .top-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .card-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
 .player{left:0;transform:none;width:100%;grid-template-columns:1fr auto}
 .progress,.time,.volume{display:none}
}

@media(max-width:560px){
 .topbar{height:60px;padding:0 10px}
 .logo-mark{font-size:30px}
 .logo-text{font-size:11px}
 .top-search{display:none}
 .layout{padding:9px}
 .hero-grid{gap:7px}
 .ad-card{height:145px;padding:16px}
 .ad-copy h1{font-size:23px}
 .ad-copy h1 strong{font-size:38px}
 .feature-card{height:125px}
 .top-grid{grid-template-columns:1fr}
 .card-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
 .cover{aspect-ratio:1/1}
 .section-title h2{font-size:13px}
 .player{padding:7px 9px}
 .player-track{max-width:calc(100vw - 95px)}
}


/* Noticias */
.news-grid{
 display:grid;
 grid-template-columns:repeat(2,minmax(0,1fr));
 gap:10px;
}
.news-card{
 min-width:0;
 display:grid;
 grid-template-columns:120px minmax(0,1fr);
 gap:11px;
 padding:8px;
 border:1px solid #492727;
 border-radius:10px;
 background:#08050d;
}
.news-image{
 height:82px;
 border-radius:7px;
 overflow:hidden;
 display:grid;
 place-items:center;
 background:linear-gradient(135deg,#42105b,#f10a7d);
 color:#fff;
 font-size:10px;
 font-weight:900;
 letter-spacing:2px;
}
.news-copy{min-width:0;padding:3px 2px}
.news-copy small,.news-copy b{display:block}
.news-copy small{font-size:6px;color:#ff55ad;margin-bottom:5px}
.news-copy b{font-size:9px;line-height:1.35}
.news-copy p{
 margin:5px 0 0;
 color:#9f939f;
 font-size:7px;
 line-height:1.45;
 display:-webkit-box;
 -webkit-line-clamp:3;
 -webkit-box-orient:vertical;
 overflow:hidden;
}
@media(max-width:700px){
 .news-grid{grid-template-columns:1fr}
}


/* Detail links / clickable content */
.content-link{color:inherit;text-decoration:none}
.content-link:hover{color:#b51b1b}
.cover-link{position:absolute;inset:0;z-index:1;display:grid;place-items:center;text-decoration:none;color:#fff}
.cover button{z-index:3}
.thumb.cover-link,.thumb{position:relative}
.news-image .cover-link{position:absolute;inset:0}
.news-image{position:relative}
.music-card:hover .content-link{text-decoration:none}


/* Mobile navigation */
.mobile-menu-btn{
  display:none;
  width:38px;
  height:38px;
  border:1px solid #492727;
  border-radius:9px;
  background:#0b0610;
  color:#fff;
  font-size:19px;
  cursor:pointer;
}

@media(max-width:800px){
  .topbar{
    position:sticky;
    overflow:visible;
  }

  .mobile-menu-btn{
    display:grid;
    place-items:center;
    margin-left:auto;
    order:3;
  }

  .topbar nav#mainNav{
    display:none;
    position:absolute;
    left:10px;
    right:10px;
    top:66px;
    z-index:100;
    padding:10px;
    border:1px solid #5e3030;
    border-radius:12px;
    background:rgba(7,4,11,.98);
    box-shadow:0 18px 45px rgba(0,0,0,.55),0 0 30px rgba(255,10,135,.12);
    flex-direction:column;
    align-items:stretch;
    overflow:visible;
  }

  .topbar nav#mainNav.mobile-open{
    display:flex;
  }

  .topbar nav#mainNav a{
    display:block;
    width:100%;
    padding:12px 13px;
    font-size:10px;
  }

  .top-search{
    display:none;
  }
}

@media(max-width:560px){
  .mobile-menu-btn{
    width:35px;
    height:35px;
  }

  .topbar nav#mainNav{
    top:58px;
  }
}


/* Section listing pages */
.listing-page{
  width:min(1180px,94%);
  margin:0 auto;
  padding:28px 0 60px;
}
.listing-hero{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  padding:24px;
  margin-bottom:22px;
  border:1px solid #492727;
  border-radius:16px;
  background:
    radial-gradient(circle at 85% 20%,rgba(255,10,135,.16),transparent 28%),
    linear-gradient(145deg,#0e0712,#07040a);
}
.listing-hero small{
  color:#c58b32;
  font-size:8px;
  letter-spacing:2px;
  font-weight:900;
}
.listing-hero h1{
  margin:7px 0 5px;
  font-size:36px;
  letter-spacing:-1px;
}
.listing-hero p{
  margin:0;
  color:#8f8390;
  font-size:9px;
}
.listing-count{
  text-align:right;
}
.listing-count b,.listing-count span{display:block}
.listing-count b{font-size:26px}
.listing-count span{font-size:7px;color:#7d7180;margin-top:4px}

.listing-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}
.listing-card{
  min-width:0;
  border:1px solid #492727;
  border-radius:11px;
  background:#08050d;
  overflow:hidden;
}
.listing-cover{
  display:grid;
  place-items:center;
  width:100%;
  aspect-ratio:1.12/1;
  overflow:hidden;
  background:linear-gradient(135deg,#3b1717,#8c0000);
  color:#fff;
  text-decoration:none;
  font-size:32px;
}
.listing-meta{padding:10px}
.listing-meta small{display:block;color:#c58b32;font-size:6px}
.listing-meta h3{font-size:10px;margin:6px 0 3px;line-height:1.35}
.listing-meta h3 a{color:#fff;text-decoration:none}
.listing-meta h3 a:hover{color:#ff4dad}
.listing-meta p{margin:0;color:#a396a5;font-size:7px}
.listing-stats{display:flex;gap:10px;margin-top:8px;color:#8d818f;font-size:7px}

.news-list-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.news-list-card{
  display:grid;
  grid-template-columns:150px minmax(0,1fr);
  gap:12px;
  min-width:0;
  padding:9px;
  border:1px solid #492727;
  border-radius:11px;
  background:#08050d;
}
.news-list-image{
  min-height:105px;
  border-radius:8px;
  overflow:hidden;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,#3b1717,#8c0000);
  color:#fff;
  text-decoration:none;
}
.news-list-meta{min-width:0;padding:2px 0}
.news-list-meta small{font-size:6px;color:#c58b32}
.news-list-meta h3{font-size:11px;margin:5px 0}
.news-list-meta h3 a{color:#fff;text-decoration:none}
.news-list-meta p{
  margin:0;
  color:#9e929f;
  font-size:8px;
  line-height:1.55;
  display:-webkit-box;
  -webkit-line-clamp:4;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.pagination{
  display:flex!important;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:7px;
  margin-top:26px;
}
.pagination a{
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  min-width:34px;
  height:34px;
  padding:0 11px;
  border:1px solid #4c153b;
  border-radius:8px;
  background:#08050d;
  color:#aaa;
  text-decoration:none;
  font-size:8px;
  font-weight:800;
}
.pagination a:hover,.pagination a.active{
  background:linear-gradient(90deg,#8c0000,#c58b32);
  border-color:transparent;
  color:#fff;
}
.empty-list{
  padding:40px;
  border:1px dashed #4a1639;
  border-radius:12px;
  text-align:center;
  color:#867a87;
  font-size:9px;
}
.section-title-with-link a{
  color:#c58b32;
  text-decoration:none;
  font-size:7px;
  font-weight:900;
  white-space:nowrap;
}

@media(max-width:900px){
  .listing-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .news-list-grid{grid-template-columns:1fr}
}
@media(max-width:650px){
  .listing-page{width:94%;padding-top:18px}
  .listing-hero{align-items:flex-start;flex-direction:column}
  .listing-count{text-align:left}
  .listing-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .news-list-card{grid-template-columns:110px minmax(0,1fr)}
}


/* Videos */
.home-video-grid,.video-list-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}
.video-card{
  min-width:0;
  border:1px solid #492727;
  border-radius:11px;
  overflow:hidden;
  background:#08050d;
}
.video-cover{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  background:#140816;
  text-decoration:none;
}
.video-cover>span{
  position:absolute;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:42px;height:42px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:rgba(255,10,135,.92);
  color:#fff;
  box-shadow:0 0 24px rgba(255,10,135,.35);
}
.video-meta{padding:10px}
.video-meta small{font-size:6px;color:#c58b32}
.video-meta h3{font-size:10px;margin:6px 0 3px}
.video-meta h3 a{color:#fff;text-decoration:none}
.video-meta p{margin:0;color:#9b8e9c;font-size:7px}

.video-detail{
  width:min(1100px,94%);
  margin:30px auto 70px;
}
.video-detail>small{color:#c58b32;font-size:7px;letter-spacing:1.5px}
.video-detail h1{font-size:34px;margin:8px 0}
.video-detail>p{color:#9b8f9c;font-size:10px;line-height:1.7}
.video-player-box{
  margin-top:20px;
  width:100%;
  aspect-ratio:16/9;
  border:1px solid #492727;
  border-radius:14px;
  overflow:hidden;
  background:#000;
}
.video-player-box iframe,.video-player-box video{
  width:100%;
  height:100%;
  display:block;
}
.video-unavailable{height:100%;display:grid;place-items:center;color:#999}

/* Legal / contact */
.legal-page{
  width:min(1050px,94%);
  margin:28px auto 70px;
}
.legal-hero{
  padding:24px;
  margin-bottom:18px;
  border:1px solid #492727;
  border-radius:16px;
  background:linear-gradient(145deg,#0e0712,#07040a);
}
.legal-hero small{color:#c58b32;font-size:8px;letter-spacing:2px}
.legal-hero h1{font-size:34px;margin:7px 0}
.legal-hero p{margin:0;color:#9b8e9c;font-size:10px;line-height:1.6}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.legal-card{
  border:1px solid #492727;
  border-radius:14px;
  background:#08050d;
  padding:20px;
}
.legal-card h2{font-size:17px;margin-top:0}
.legal-card p,.legal-copy p{color:#a79aa8;font-size:10px;line-height:1.8}
.legal-copy h2{margin-top:24px}
.legal-note{padding:12px;border:1px solid #472929;border-radius:10px;background:#0d0711}
.contact-form{display:grid;gap:11px}
.contact-form label{font-size:8px;color:#a99baa}
.contact-form input,.contact-form textarea{
  width:100%;
  display:block;
  margin-top:6px;
  background:#050309;
  border:1px solid #45203b;
  color:#fff;
  border-radius:8px;
  padding:10px;
}
.contact-form button{
  border:0;
  background:linear-gradient(90deg,#8c0000,#c58b32);
  color:#fff;
  padding:11px;
  border-radius:8px;
  font-weight:900;
}
.form-success,.form-error{padding:10px;border-radius:8px;font-size:8px;margin-bottom:10px}
.form-success{background:#0c2d1d;color:#7de6a7;border:1px solid #195f3a}
.form-error{background:#321020;color:#ff9bc8;border:1px solid #593030}

.site-footer-links{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
  padding:24px 20px;
  border-top:1px solid #2d1027;
  color:#817583;
  font-size:8px;
}
.site-footer-links a{
  color:#c58b32;
  text-decoration:none;
}

@media(max-width:900px){
  .home-video-grid,.video-list-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:700px){
  .contact-grid{grid-template-columns:1fr}
}
@media(max-width:520px){
  .home-video-grid,.video-list-grid{grid-template-columns:1fr}
}


/* =========================================================
   UX UPDATE — VIDEOS MÁS COMPACTOS + TIPOGRAFÍA MÁS GRANDE
   ========================================================= */

/* Base typography */
body{
  font-size:16px;
  line-height:1.5;
}

.topbar nav a{
  font-size:11px;
}

.top-search input{
  font-size:11px;
}

.logo-text{
  font-size:15px;
}

.logo-text small{
  font-size:7px;
}

/* Homepage sections */
.section-title h2{
  font-size:18px;
}

.feature-copy small{
  font-size:8px;
}

.feature-copy b{
  font-size:12px;
}

.feature-copy span{
  font-size:8px;
}

.track-info b{
  font-size:10px;
}

.track-info span{
  font-size:8px;
}

.track-info small{
  font-size:7px;
}

.music-meta b{
  font-size:10px;
}

.music-meta span{
  font-size:8px;
}

.music-meta small,
.music-meta em{
  font-size:7px;
}

.panel-title b{
  font-size:11px;
}

.stat-grid small{
  font-size:7px;
}

.stat-grid b{
  font-size:18px;
}

.side-copy b{
  font-size:9px;
}

.side-copy span,
.side-row small,
.latest-row small{
  font-size:7px;
}

/* Videos on homepage: friendlier card size */
.home-video-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  align-items:start;
}

.home-video-grid .video-card{
  max-width:100%;
  border-radius:12px;
}

.home-video-grid .video-cover{
  aspect-ratio:16/10;
  max-height:170px;
}

.home-video-grid .video-cover img{
  object-fit:cover;
}

.home-video-grid .video-cover>span{
  width:38px;
  height:38px;
  font-size:13px;
}

.home-video-grid .video-meta{
  padding:11px 12px 12px;
}

.home-video-grid .video-meta small{
  font-size:7px;
}

.home-video-grid .video-meta h3{
  font-size:11px;
  line-height:1.35;
  margin:6px 0 4px;
}

.home-video-grid .video-meta p{
  font-size:8px;
}

/* Videos listing page */
.video-list-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
}

.video-list-grid .video-cover{
  aspect-ratio:16/10;
  max-height:190px;
}

.video-list-grid .video-meta h3{
  font-size:11px;
}

.video-list-grid .video-meta p{
  font-size:8px;
}

/* Listing pages */
.listing-hero small{
  font-size:9px;
}

.listing-hero h1{
  font-size:40px;
}

.listing-hero p{
  font-size:11px;
}

.listing-count span{
  font-size:8px;
}

.listing-meta small{
  font-size:7px;
}

.listing-meta h3{
  font-size:12px;
}

.listing-meta p,
.listing-stats{
  font-size:8px;
}

.news-list-meta small{
  font-size:7px;
}

.news-list-meta h3{
  font-size:12px;
}

.news-list-meta p{
  font-size:9px;
}

/* Individual detail pages */
.detail-kicker{
  font-size:9px;
}

.detail-meta h1{
  font-size:40px;
}

.detail-artist{
  font-size:14px;
}

.detail-info span{
  font-size:9px;
}

.detail-actions button,
.detail-actions a{
  font-size:10px;
}

.article-body{
  font-size:14px;
}

/* Video detail */
.video-detail>small{
  font-size:8px;
}

.video-detail h1{
  font-size:38px;
}

.video-detail>p{
  font-size:12px;
}

/* Contact / privacy */
.legal-hero small{
  font-size:9px;
}

.legal-hero h1{
  font-size:38px;
}

.legal-hero p{
  font-size:12px;
}

.legal-card h2{
  font-size:19px;
}

.legal-card p,
.legal-copy p{
  font-size:12px;
}

.contact-form label{
  font-size:10px;
}

/* Footer */
.site-footer-links,
footer{
  font-size:10px;
}

/* Player */
.player-track b{
  font-size:10px;
}

.player-track span,
.time{
  font-size:8px;
}

/* Admin: larger, clearer text */
.adminbar a{
  font-size:10px !important;
}

.adminside a{
  font-size:11px !important;
}

.admintitle small{
  font-size:8px !important;
}

.admintitle h1{
  font-size:30px !important;
}

.metric small{
  font-size:8px !important;
}

.metric b{
  font-size:24px !important;
}

.metric em{
  font-size:8px !important;
}

.adminpanel h2{
  font-size:18px !important;
}

.panel-head-pro small{
  font-size:8px !important;
}

.panel-head-pro h2{
  font-size:19px !important;
}

.pro-form label,
.form label{
  font-size:10px !important;
}

.form input,
.form select,
.form textarea{
  font-size:11px !important;
}

.upload-card b{
  font-size:10px !important;
}

.upload-card small{
  font-size:8px !important;
}

.media-admin-copy b{
  font-size:10px !important;
}

.media-admin-copy small{
  font-size:8px !important;
}

.edit-btn,
.danger{
  font-size:9px !important;
}

/* Admin login */
.login h1{
  font-size:28px !important;
}

.login p{
  font-size:11px !important;
}

.login input,
.login button{
  font-size:11px !important;
}

/* Mobile improvements */
@media(max-width:1000px){
  .home-video-grid,
  .video-list-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media(max-width:760px){
  .home-video-grid,
  .video-list-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }

  .home-video-grid .video-cover,
  .video-list-grid .video-cover{
    max-height:none;
  }

  .section-title h2{
    font-size:16px;
  }

  .listing-hero h1,
  .legal-hero h1,
  .video-detail h1{
    font-size:30px;
  }

  .detail-meta h1{
    font-size:30px;
  }
}

@media(max-width:480px){
  .home-video-grid,
  .video-list-grid{
    grid-template-columns:1fr 1fr;
  }

  .home-video-grid .video-meta h3,
  .video-list-grid .video-meta h3{
    font-size:10px;
  }

  .home-video-grid .video-meta p,
  .video-list-grid .video-meta p{
    font-size:7px;
  }

  .topbar nav#mainNav a{
    font-size:11px;
  }

  .adminside a{
    font-size:10px !important;
  }
}


/* =========================================================
   PROFESSIONAL CONTENT PAGES + BIGGER PUBLICATION TYPOGRAPHY
   ========================================================= */

/* Bigger text in publication cards */
.music-meta b,
.listing-meta h3,
.video-meta h3,
.news-list-meta h3,
.news-copy b,
.track-info b,
.side-copy b{
  font-size:12px !important;
  line-height:1.35;
}

.music-meta span,
.listing-meta p,
.video-meta p,
.news-list-meta p,
.track-info span,
.side-copy span{
  font-size:9px !important;
}

.music-meta small,
.listing-meta small,
.video-meta small,
.news-list-meta small,
.news-copy small,
.track-info small,
.side-row small,
.latest-row small{
  font-size:8px !important;
}

.music-meta em,
.listing-stats,
.related-stats{
  font-size:8px !important;
}

.section-title h2{
  font-size:19px !important;
}

.panel-title b{
  font-size:12px !important;
}

/* Detail page professional redesign */
.detail-card-pro{
  grid-template-columns:360px minmax(0,1fr);
  gap:32px;
  padding:26px;
  background:
    radial-gradient(circle at 85% 15%,rgba(255,10,135,.12),transparent 28%),
    linear-gradient(145deg,#0e0712,#07040a);
}

.detail-media-column{
  min-width:0;
}

.share-card{
  margin-top:12px;
  padding:13px;
  border:1px solid #451638;
  border-radius:11px;
  background:#08050d;
}

.share-card>small{
  display:block;
  margin-bottom:8px;
  color:#c58b32;
  font-size:8px;
  letter-spacing:1.4px;
  font-weight:900;
}

.share-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}

.share-btn{
  border:1px solid #4d1c3e;
  background:#120914;
  color:#fff;
  text-decoration:none;
  border-radius:8px;
  padding:8px 10px;
  font-size:8px;
  font-weight:800;
  cursor:pointer;
}

.share-btn:hover{
  border-color:#ff2da8;
  background:#1a0d1a;
}

.detail-kicker{
  font-size:10px !important;
}

.detail-meta h1{
  font-size:42px !important;
  letter-spacing:-1.5px;
  margin-bottom:10px;
}

.detail-artist{
  font-size:15px !important;
  color:#d4c9d5;
}

.detail-stats-pro{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin:22px 0;
}

.detail-stats-pro>div{
  padding:13px;
  border:1px solid #3f1734;
  border-radius:11px;
  background:#09050d;
}

.detail-stats-pro small,
.detail-stats-pro b{
  display:block;
}

.detail-stats-pro small{
  color:#8f828f;
  font-size:8px;
  letter-spacing:1px;
}

.detail-stats-pro b{
  margin-top:5px;
  font-size:16px;
}

.detail-actions{
  margin-top:8px;
}

.detail-actions button,
.detail-actions a{
  font-size:11px !important;
  padding:13px 18px !important;
}

.detail-description{
  margin-top:22px;
  padding-top:18px;
  border-top:1px solid #2b1026;
}

.detail-description small{
  color:#c58b32;
  font-size:8px;
  letter-spacing:1.5px;
  font-weight:900;
}

.detail-description p{
  color:#a99cab;
  font-size:11px;
  line-height:1.7;
}

.article-body{
  font-size:14px !important;
  line-height:1.9;
  color:#d0c5d1;
}

/* Related content */
.related-section{
  margin-top:28px;
}

.related-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}

.related-card{
  min-width:0;
  border:1px solid #472929;
  border-radius:11px;
  overflow:hidden;
  background:#08050d;
}

.related-cover{
  position:relative;
  display:grid;
  place-items:center;
  width:100%;
  aspect-ratio:1.15/1;
  overflow:hidden;
  background:linear-gradient(135deg,#3b1717,#8c0000);
  color:#fff;
  text-decoration:none;
}

.related-meta{
  padding:10px;
}

.related-meta small{
  display:block;
  color:#c58b32;
  font-size:7px;
}

.related-meta h3{
  margin:6px 0 4px;
  font-size:11px;
}

.related-meta h3 a{
  color:#fff;
  text-decoration:none;
}

.related-meta p{
  margin:0;
  color:#9c8f9d;
  font-size:8px;
}

.related-stats{
  display:flex;
  gap:10px;
  margin-top:7px;
  color:#8d818e;
}

.related-news-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

.related-news-card{
  display:grid;
  grid-template-columns:130px minmax(0,1fr);
  gap:11px;
  padding:9px;
  border:1px solid #472929;
  border-radius:11px;
  background:#08050d;
}

.related-news-card .related-cover{
  aspect-ratio:1.2/1;
  border-radius:8px;
}

.related-news-card small{
  color:#c58b32;
  font-size:7px;
}

.related-news-card h3{
  margin:5px 0;
  font-size:11px;
}

.related-news-card h3 a{
  color:#fff;
  text-decoration:none;
}

.related-news-card p{
  margin:0;
  color:#9c8f9d;
  font-size:8px;
  line-height:1.5;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* Video detail */
.video-detail-pro{
  width:min(1120px,94%);
}

.video-detail-head{
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:flex-start;
}

.video-detail-head h1{
  font-size:40px !important;
}

.video-detail-head p{
  font-size:12px !important;
}

.video-source-badge{
  flex:0 0 auto;
  padding:8px 11px;
  border-radius:9px;
  border:1px solid #492727;
  background:#100815;
  color:#c58b32;
  font-size:8px;
  font-weight:900;
}

.video-share-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-top:14px;
  padding:14px 16px;
  border:1px solid #451638;
  border-radius:11px;
  background:#08050d;
}

.video-share-card small,
.video-share-card b{
  display:block;
}

.video-share-card small{
  color:#c58b32;
  font-size:8px;
  letter-spacing:1.3px;
}

.video-share-card b{
  margin-top:4px;
  font-size:11px;
}

.related-play{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:rgba(255,10,135,.92);
  box-shadow:0 0 20px rgba(255,10,135,.35);
}

/* Admin readable typography boost */
.adminpanel,
.adminmain,
.adminside,
.adminbar{
  font-size:14px;
}

.adminside a{
  font-size:12px !important;
}

.pro-form label,
.form label{
  font-size:11px !important;
}

.form input,
.form select,
.form textarea{
  font-size:12px !important;
}

.media-admin-copy b{
  font-size:11px !important;
}

.media-admin-copy small{
  font-size:9px !important;
}

.metric small{
  font-size:9px !important;
}

.metric em{
  font-size:9px !important;
}

/* Responsive */
@media(max-width:900px){
  .detail-card-pro{
    grid-template-columns:300px minmax(0,1fr);
  }

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

@media(max-width:760px){
  .detail-card-pro{
    grid-template-columns:1fr;
  }

  .detail-media-column{
    max-width:520px;
    margin:auto;
    width:100%;
  }

  .detail-meta h1{
    font-size:32px !important;
  }

  .related-news-grid{
    grid-template-columns:1fr;
  }

  .video-detail-head,
  .video-share-card{
    flex-direction:column;
  }
}

@media(max-width:520px){
  .related-grid{
    grid-template-columns:1fr 1fr;
  }

  .related-news-card{
    grid-template-columns:105px minmax(0,1fr);
  }

  .share-buttons{
    display:grid;
    grid-template-columns:1fr 1fr;
  }

  .detail-stats-pro{
    grid-template-columns:1fr 1fr;
  }
}


/* Album tracklist admin */
.field-help{
  display:block;
  margin:5px 0 8px;
  color:#7f7380;
  font-size:8px;
  font-weight:400;
}

.track-picker{
  display:grid;
  gap:7px;
  max-height:360px;
  overflow:auto;
  padding:8px;
  margin-top:7px;
  border:1px solid #3e1732;
  border-radius:10px;
  background:#07040a;
}

.track-option{
  display:grid!important;
  grid-template-columns:auto 38px minmax(0,1fr);
  align-items:center;
  gap:9px;
  padding:7px;
  border:1px solid #261020;
  border-radius:8px;
  background:#0a0610;
  cursor:pointer;
}

.track-option:hover{
  border-color:#6e2354;
  background:#100812;
}

.track-option>input{
  width:auto!important;
  margin:0!important;
}

.track-option-cover{
  width:38px;
  height:38px;
  border-radius:6px;
  overflow:hidden;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,#3b1717,#8c0000);
}

.track-option-copy{
  min-width:0;
}

.track-option-copy b,
.track-option-copy small{
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.track-option-copy b{
  font-size:9px;
  color:#fff;
}

.track-option-copy small{
  margin-top:3px;
  font-size:7px;
  color:#8b7e8c;
}

/* Album public tracklist */
.album-tracklist-section{
  margin-top:28px;
}

.album-tracklist{
  display:grid;
  gap:8px;
}

.album-track-row{
  display:grid;
  grid-template-columns:36px 52px minmax(0,1fr) auto 38px;
  align-items:center;
  gap:11px;
  padding:9px 11px;
  border:1px solid #441538;
  border-radius:11px;
  background:linear-gradient(145deg,#0a0610,#07040a);
  transition:.2s;
}

.album-track-row:hover{
  border-color:#8e2968;
  transform:translateY(-1px);
}

.album-track-number{
  color:#c58b32;
  font-size:11px;
  font-weight:900;
}

.album-track-cover{
  width:52px;
  height:52px;
  overflow:hidden;
  border-radius:8px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,#3b1717,#8c0000);
  color:#fff;
  text-decoration:none;
}

.album-track-copy{
  min-width:0;
}

.album-track-copy b,
.album-track-copy span{
  display:block;
}

.album-track-copy b{
  font-size:11px;
}

.album-track-copy b a{
  color:#fff;
  text-decoration:none;
}

.album-track-copy span{
  margin-top:4px;
  color:#9a8d9b;
  font-size:8px;
}

.album-track-stats{
  display:flex;
  gap:10px;
  color:#887b89;
  font-size:8px;
}

.album-track-play{
  width:36px;
  height:36px;
  border:0;
  border-radius:50%;
  background:linear-gradient(135deg,#8c0000,#c58b32);
  color:#fff;
  cursor:pointer;
}

@media(max-width:650px){
  .album-track-row{
    grid-template-columns:28px 45px minmax(0,1fr) 36px;
  }

  .album-track-cover{
    width:45px;
    height:45px;
  }

  .album-track-stats{
    display:none;
  }
}


/* Logo personalizado SectorUrbano */
.brand-image-logo{
  display:flex!important;
  align-items:center;
  justify-content:flex-start;
  min-width:150px;
  height:62px;
  padding:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.brand-image-logo img{
  width:auto!important;
  height:56px!important;
  max-width:190px;
  object-fit:contain!important;
  object-position:left center;
  filter:drop-shadow(0 0 10px rgba(212,32,120,.18));
}
.adminbar .brand-image-logo,
.auth .brand-image-logo,
.login .brand-image-logo{
  height:58px;
}
.adminbar .brand-image-logo img,
.auth .brand-image-logo img,
.login .brand-image-logo img{
  height:50px!important;
}

@media(max-width:700px){
  .brand-image-logo{
    min-width:auto;
    height:54px;
  }
  .brand-image-logo img{
    height:48px!important;
    max-width:145px;
  }
}


/* =========================================================
   SECTORURBANO — PALETA OFICIAL BASADA EN EL LOGO
   ========================================================= */
:root{
  --su-bg:#090506;
  --su-surface:#12090B;
  --su-surface-2:#1A0D10;
  --su-border:#4B1821;
  --su-border-strong:#68202C;
  --su-primary:#A91F36;
  --su-primary-2:#D12C49;
  --su-accent:#E6465E;
  --su-accent-soft:#F07183;
  --su-text:#F7F1F2;
  --su-muted:#BCA7AB;
  --su-muted-2:#8F7B7F;
}

html,body{
  background:var(--su-bg)!important;
  color:var(--su-text)!important;
}

body{
  background:
    radial-gradient(circle at 20% 0%,rgba(169,31,54,.09),transparent 28%),
    linear-gradient(180deg,#0b0607 0%,#080405 100%)!important;
}

/* Header / navigation */
.topbar,
.adminbar{
  background:rgba(10,5,6,.96)!important;
  border-color:var(--su-border)!important;
}

.topbar nav a,
.adminbar a{
  color:var(--su-muted)!important;
}

.topbar nav a:hover,
.topbar nav a.active,
.adminbar a:hover,
.adminbar a.active{
  color:#fff!important;
  background:rgba(169,31,54,.14)!important;
}

.mobile-menu-btn{
  color:var(--su-accent)!important;
  border-color:var(--su-border-strong)!important;
}

.top-search,
.top-search input{
  background:#0e0809!important;
  border-color:var(--su-border)!important;
  color:#fff!important;
}

/* Titles and highlights */
.section-title h2,
.panel-title b,
.detail-kicker,
.legal-hero small,
.listing-hero small,
.video-detail>small,
.video-share-card small,
.share-card>small,
.detail-description small,
.related-meta small,
.related-news-card small,
.video-meta small,
.music-meta small,
.news-list-meta small,
.track-info small,
.field-help{
  color:var(--su-accent-soft)!important;
}

.section-title i{
  background:linear-gradient(90deg,transparent,var(--su-primary),transparent)!important;
}

a{
  text-decoration-color:var(--su-primary)!important;
}

/* Main cards */
.music-card,
.video-card,
.news-card,
.side-panel,
.adminpanel,
.metric,
.legal-card,
.legal-hero,
.listing-card,
.detail-card,
.related-card,
.related-news-card,
.album-track-row,
.share-card,
.video-share-card{
  background:linear-gradient(145deg,var(--su-surface),#090506)!important;
  border-color:var(--su-border)!important;
}

.music-card:hover,
.video-card:hover,
.related-card:hover,
.album-track-row:hover{
  border-color:var(--su-primary)!important;
  box-shadow:0 8px 28px rgba(169,31,54,.13)!important;
}

/* Covers / placeholders */
.music-cover,
.related-cover,
.track-option-cover,
.album-track-cover{
  background:linear-gradient(135deg,#571521,var(--su-primary2))!important;
}

.video-cover>span,
.related-play,
.album-track-play{
  background:linear-gradient(135deg,var(--su-primary2),var(--su-primary))!important;
  box-shadow:0 0 20px rgba(209,44,73,.30)!important;
}

/* Primary buttons */
.detail-play,
.primary-admin-btn,
.contact-form button,
.login button{
  background:linear-gradient(90deg,var(--su-primary),var(--su-primary2))!important;
  color:#fff!important;
  box-shadow:0 7px 22px rgba(169,31,54,.18)!important;
}

.detail-download{
  border-color:var(--su-primary)!important;
  color:var(--su-accent-soft)!important;
  background:rgba(169,31,54,.08)!important;
}

.share-btn,
.edit-btn{
  border-color:var(--su-border-strong)!important;
  background:var(--su-surface-2)!important;
  color:var(--su-text)!important;
}

.share-btn:hover,
.edit-btn:hover{
  border-color:var(--su-primary2)!important;
  background:rgba(169,31,54,.15)!important;
}

/* Stats / metadata */
.detail-stats-pro>div,
.stat-grid>div{
  background:#0d0708!important;
  border-color:var(--su-border)!important;
}

.detail-stats-pro small,
.music-meta span,
.music-meta em,
.video-meta p,
.listing-meta p,
.news-list-meta p,
.album-track-copy span,
.album-track-stats,
.related-meta p,
.related-stats,
.detail-description p,
.legal-card p,
.legal-copy p{
  color:var(--su-muted)!important;
}

/* Player */
.player{
  background:rgba(11,6,7,.97)!important;
  border-color:var(--su-border)!important;
}

.player button,
.player .play-main{
  color:#fff!important;
}

.progress span,
.volume span{
  background:var(--su-primary2)!important;
}

/* Forms */
.form input,
.form select,
.form textarea,
.contact-form input,
.contact-form textarea,
.login input{
  background:#0b0607!important;
  border-color:var(--su-border)!important;
  color:#fff!important;
}

.form input:focus,
.form select:focus,
.form textarea:focus,
.contact-form input:focus,
.contact-form textarea:focus,
.login input:focus{
  border-color:var(--su-primary2)!important;
  outline:none!important;
  box-shadow:0 0 0 3px rgba(169,31,54,.10)!important;
}

/* Admin */
.adminside{
  background:#0b0607!important;
  border-color:var(--su-border)!important;
}

.adminside a{
  color:var(--su-muted)!important;
}

.adminside a:hover,
.adminside a.active{
  color:#fff!important;
  background:linear-gradient(90deg,rgba(169,31,54,.22),rgba(169,31,54,.05))!important;
  border-color:var(--su-primary)!important;
}

.metric span,
.panel-head-pro>div>span,
.upload-icon{
  color:var(--su-accent)!important;
}

.upload-card,
.track-picker,
.track-option{
  background:#0b0607!important;
  border-color:var(--su-border)!important;
}

.track-option:hover{
  background:#160b0d!important;
  border-color:var(--su-primary)!important;
}

/* Pagination */
.pagination a{
  border-color:var(--su-border)!important;
  background:var(--su-surface)!important;
  color:var(--su-muted)!important;
}

.pagination a.active,
.pagination a:hover{
  background:var(--su-primary)!important;
  border-color:var(--su-primary2)!important;
  color:#fff!important;
}

/* Footer */
.site-footer-links,
footer{
  border-color:var(--su-border)!important;
  color:var(--su-muted2)!important;
}

.site-footer-links a{
  color:var(--su-accent-soft)!important;
}

/* Logo shadow now matches logo palette */
.brand-image-logo img{
  filter:drop-shadow(0 0 10px rgba(169,31,54,.20))!important;
}

/* Scrollbar */
*{
  scrollbar-color:var(--su-primary) #0b0607;
}


/* Publicidad múltiple */
.ad-card-dynamic{
  padding:0!important;
  overflow:hidden;
  position:relative;
}
.ad-image-link{
  display:block;
  width:100%;
  height:100%;
}
.ad-image-link img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.ad-dynamic-overlay{
  position:absolute;
  left:12px;
  bottom:12px;
}
.ad-dynamic-overlay span{
  display:inline-block;
  padding:7px 11px;
  border-radius:8px;
  background:rgba(9,5,6,.88);
  border:1px solid var(--su-border-strong);
  color:#fff;
  font-size:8px;
  font-weight:900;
}

.ads-row-section{
  margin:18px 0;
}
.ads-row{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.ad-wide-card{
  position:relative;
  display:block;
  overflow:hidden;
  min-height:120px;
  border:1px solid var(--su-border);
  border-radius:12px;
  background:var(--su-surface);
}
.ad-wide-card img{
  width:100%;
  height:100%;
  min-height:120px;
  object-fit:cover;
}
.ad-wide-card span{
  position:absolute;
  left:10px;
  bottom:10px;
  padding:7px 10px;
  border-radius:8px;
  background:rgba(9,5,6,.9);
  color:#fff;
  font-size:8px;
  font-weight:900;
}

.ad-side-panel{
  padding:8px!important;
}
.ad-side-card{
  display:block;
  overflow:hidden;
  width:100%;
  border-radius:9px;
  margin-bottom:8px;
}
.ad-side-card:last-child{
  margin-bottom:0;
}
.ad-side-card img{
  width:100%;
  height:auto;
  max-height:210px;
  object-fit:cover;
}

.footer-ad-wrap{
  width:min(1180px,94%);
  margin:24px auto 0;
}
.footer-ad-card{
  display:block;
  overflow:hidden;
  border:1px solid var(--su-border);
  border-radius:12px;
}
.footer-ad-card img{
  width:100%;
  max-height:180px;
  object-fit:cover;
}

/* Admin publicidad */
.ad-date-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.ad-admin-row{
  display:grid;
  grid-template-columns:80px minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
  padding:10px 0;
  border-bottom:1px solid var(--su-border);
}
.ad-admin-image{
  width:80px;
  height:55px;
  overflow:hidden;
  border-radius:8px;
  background:#0b0607;
}
.ad-admin-image img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.ad-admin-copy{
  min-width:0;
}
.ad-admin-copy b,
.ad-admin-copy small{
  display:block;
}
.ad-admin-copy b{
  font-size:11px;
}
.ad-admin-copy small{
  margin-top:3px;
  color:var(--su-muted);
  font-size:8px;
}
.admin-empty{
  color:var(--su-muted);
  font-size:10px;
}

@media(max-width:700px){
  .ads-row{
    grid-template-columns:1fr;
  }
  .ad-date-grid{
    grid-template-columns:1fr;
  }
  .ad-admin-row{
    grid-template-columns:65px minmax(0,1fr);
  }
  .ad-admin-image{
    width:65px;
    height:48px;
  }
  .ad-admin-row .admin-row-actions{
    grid-column:1/-1;
    justify-content:flex-end;
  }
}


/* =========================================================
   VERSIÓN URBAN NIGHT — BASADA EN EL MOCKUP ORIGINAL
   Negro + magenta + violeta + amarillo eléctrico
   ========================================================= */

:root{
  --urban-bg:#030207;
  --urban-bg2:#07050B;
  --urban-panel:#0B0710;
  --urban-panel2:#110A16;
  --urban-line:#5C184B;

  --urban-pink:#8c0000;
  --urban-pink2:#c58b32;
  --urban-purple:#c58b32;
  --urban-yellow:#FFD42A;

  --urban-text:#FFFFFF;
  --urban-muted:#A99EAC;
}

/* Fondo general */
html,body{
  background:
    radial-gradient(circle at 8% 18%,rgba(255,10,136,.10),transparent 24%),
    radial-gradient(circle at 95% 64%,rgba(123,28,255,.10),transparent 28%),
    #020206!important;
  color:var(--urban-text)!important;
}

.site{
  background:linear-gradient(180deg,#06040A,#030207)!important;
  border-color:rgba(255,10,136,.32)!important;
  box-shadow:0 0 85px rgba(255,10,136,.07)!important;
}

/* Cabecera */
.topbar,
.adminbar{
  background:rgba(5,3,9,.97)!important;
  border-bottom:1px solid #33122C!important;
}

.topbar nav a,
.adminbar a{
  color:#E8E0E9!important;
}

.topbar nav a:hover,
.topbar nav a.active,
.adminside a:hover,
.adminside a.active{
  background:linear-gradient(90deg,var(--urban-pink),#D90A89)!important;
  color:#fff!important;
  box-shadow:0 0 22px rgba(255,10,136,.24)!important;
}

.top-search{
  background:#08050D!important;
  border-color:#4E1743!important;
}

.top-search button{
  background:var(--urban-pink)!important;
  color:#fff!important;
}

/* Títulos: mantener el rosa original */
.section-title h2,
.panel-title b,
.panel-head-pro h2,
.admintitle h1,
.listing-hero h1,
.detail-meta h1,
.video-detail h1,
.legal-hero h1{
  color:#fff!important;
}

.section-title h2::first-letter,
.panel-title b,
.panel-head-pro small,
.detail-kicker,
.listing-hero small,
.video-detail>small,
.legal-hero small,
.news-copy small,
.video-meta small,
.music-meta small,
.listing-meta small,
.related-meta small,
.related-news-card small,
.share-card>small,
.video-share-card small{
  color:var(--urban-pink2)!important;
}

.section-title i{
  background:linear-gradient(90deg,transparent,var(--urban-yellow),var(--urban-pink),transparent)!important;
  box-shadow:0 0 10px rgba(255,10,136,.22)!important;
}

/* Tarjetas */
.music-card,
.video-card,
.news-card,
.listing-card,
.related-card,
.related-news-card,
.panel,
.adminpanel,
.metric,
.detail-card,
.legal-card,
.legal-hero,
.share-card,
.video-share-card,
.album-track-row,
.ad-admin-row{
  background:linear-gradient(145deg,var(--urban-panel),#07050B)!important;
  border-color:var(--urban-line)!important;
}

.music-card:hover,
.video-card:hover,
.listing-card:hover,
.related-card:hover,
.album-track-row:hover{
  border-color:var(--urban-pink)!important;
  box-shadow:0 12px 28px rgba(255,10,136,.12)!important;
}

/* Portadas */
.cover,
.thumb,
.side-thumb,
.media-admin-cover,
.related-cover,
.album-track-cover,
.track-option-cover{
  background:linear-gradient(135deg,#32104D,#D80B77)!important;
}

.cover button,
.round-btn,
.album-track-play,
.video-cover>span,
.related-play,
.player-controls .main-play{
  background:linear-gradient(135deg,var(--urban-pink),var(--urban-purple))!important;
  box-shadow:0 0 20px rgba(255,10,136,.28)!important;
}

/* Botones */
.primary-admin-btn,
.detail-play,
.contact-form button,
.login button{
  background:linear-gradient(90deg,var(--urban-pink),var(--urban-purple))!important;
  color:#fff!important;
}

.detail-download,
.share-btn,
.edit-btn{
  background:#140B18!important;
  border-color:#4a3030!important;
  color:#fff!important;
}

.detail-download:hover,
.share-btn:hover,
.edit-btn:hover{
  border-color:var(--urban-pink)!important;
  background:#1C0D1D!important;
}

/* Acentos amarillos del mockup */
.rank,
.side-rank{
  background:var(--urban-pink)!important;
}

.ad-copy a,
.ad-card .ad-copy a{
  background:var(--urban-yellow)!important;
  color:#111!important;
}

.logo-mark{
  color:var(--urban-yellow)!important;
}

/* Estadísticas */
.stat-grid>div,
.detail-stats-pro>div{
  background:#09060D!important;
  border-color:#5A1948!important;
}

.stat-grid>div>span,
.metric>span,
.panel-head-pro>div>span,
.upload-icon{
  color:var(--urban-pink)!important;
}

/* Reproductor */
.player{
  background:rgba(5,3,9,.97)!important;
  border-top:1px solid #421431!important;
}

.player input[type=range]{
  accent-color:var(--urban-pink)!important;
}

/* Formularios */
.form input,
.form select,
.form textarea,
.contact-form input,
.contact-form textarea,
.login input{
  background:#08050D!important;
  border-color:#4A1740!important;
  color:#fff!important;
}

.form input:focus,
.form select:focus,
.form textarea:focus,
.contact-form input:focus,
.contact-form textarea:focus,
.login input:focus{
  border-color:var(--urban-pink)!important;
  box-shadow:0 0 0 3px rgba(255,10,136,.10)!important;
}

/* Sidebar admin */
.adminside{
  background:linear-gradient(180deg,#09060E,#050309)!important;
  border-color:#2B1025!important;
}

.adminside a{
  color:#B9ACBC!important;
}

/* Publicidad */
.ad-card{
  background:
    radial-gradient(circle at 35% 45%,rgba(123,28,255,.30),transparent 34%),
    radial-gradient(circle at 72% 28%,rgba(255,10,136,.22),transparent 26%),
    linear-gradient(120deg,#14041D,#290531)!important;
  border-color:#8F155C!important;
}

.ad-wide-card,
.ad-side-card,
.footer-ad-card{
  border-color:#6B174E!important;
}

/* Paginación */
.pagination a{
  background:#09060D!important;
  border-color:#462929!important;
  color:#BBB0BE!important;
}

.pagination a.active,
.pagination a:hover{
  background:linear-gradient(90deg,var(--urban-pink),var(--urban-purple))!important;
  color:#fff!important;
}

/* Footer */
.site-footer-links,
footer{
  border-color:#2C1027!important;
  color:#8D818F!important;
}

.site-footer-links a{
  color:var(--urban-pink2)!important;
}

/* Tipografía más visible */
.music-meta b,
.listing-meta h3,
.video-meta h3,
.news-list-meta h3,
.news-copy b,
.track-info b,
.side-copy b{
  font-size:13px!important;
}

.music-meta span,
.listing-meta p,
.video-meta p,
.news-list-meta p,
.track-info span,
.side-copy span{
  font-size:10px!important;
}

.music-meta small,
.listing-meta small,
.video-meta small,
.news-list-meta small,
.news-copy small,
.track-info small,
.side-row small,
.latest-row small{
  font-size:9px!important;
}

.section-title h2{
  font-size:20px!important;
}

.topbar nav a{
  font-size:11px!important;
}

/* Home más parecido al mockup */
.hero-grid{
  gap:10px!important;
}

.feature-card,
.ad-card{
  border-radius:12px!important;
}

.top-grid{
  gap:10px!important;
}

.home-video-grid{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:10px!important;
}

.home-video-grid .video-cover{
  aspect-ratio:16/9!important;
  max-height:150px!important;
}

/* Título original en rosa en bloques */
.section-title-with-link a{
  color:var(--urban-pink2)!important;
  font-size:8px!important;
}

/* Mobile */
@media(max-width:900px){
  .home-video-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

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

  .section-title h2{
    font-size:17px!important;
  }

  .music-meta b,
  .video-meta h3,
  .news-list-meta h3{
    font-size:12px!important;
  }
}


.urban-divider{
  display:flex;
  align-items:center;
  gap:12px;
  margin:16px 0 18px;
  padding:8px 12px;
  border:1px solid #462929;
  border-radius:10px;
  background:linear-gradient(90deg,#0A060E,#16091B,#09060D);
}
.urban-divider span{
  color:#FFD42A;
  font-size:8px;
  font-weight:900;
  letter-spacing:1.8px;
}
.urban-divider i{
  flex:1;
  height:2px;
  background:linear-gradient(90deg,#FFD42A,#8c0000,#c58b32);
}
.urban-divider b{
  color:#c58b32;
  font-size:8px;
  letter-spacing:.8px;
}
@media(max-width:650px){
  .urban-divider b{display:none}
}


/* Upload progress */
.upload-progress-overlay{
  position:fixed;
  inset:0;
  z-index:99999;
  display:none;
  place-items:center;
  padding:20px;
  background:rgba(2,2,6,.82);
  backdrop-filter:blur(8px);
}
.upload-progress-overlay.show{display:grid}
.upload-progress-card{
  width:min(520px,95vw);
  padding:22px;
  border:1px solid #6d1950;
  border-radius:16px;
  background:linear-gradient(145deg,#0d0711,#07040a);
  box-shadow:0 25px 80px rgba(0,0,0,.55);
}
.upload-progress-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}
.upload-progress-head small{
  color:#c58b32;
  font-size:9px;
  font-weight:900;
  letter-spacing:1.5px;
}
.upload-progress-head h3{
  margin:5px 0 0;
  font-size:18px;
}
.upload-progress-head strong{
  font-size:26px;
  color:#ffd42a;
}
.upload-progress-track{
  height:12px;
  margin:18px 0 10px;
  overflow:hidden;
  border:1px solid #3e1431;
  border-radius:999px;
  background:#050309;
}
.upload-progress-bar{
  width:0;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,#8c0000,#c58b32,#ffd42a);
  transition:width .15s linear;
}
.upload-progress-meta{
  display:flex;
  justify-content:space-between;
  color:#b7abb9;
  font-size:10px;
}
.upload-progress-card p{
  margin:12px 0 0;
  color:#928694;
  font-size:10px;
  line-height:1.5;
}
.server-upload-limits{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:10px 0 14px;
  padding:9px 11px;
  border:1px solid #3d1532;
  border-radius:9px;
  background:#08050d;
  font-size:9px;
  color:#aaa0ad;
}
.server-upload-limits b{color:#fff}
.server-upload-limits span{
  padding:4px 7px;
  border-radius:6px;
  background:#120913;
}
.album-upload-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
}
@media(max-width:900px){
  .album-upload-grid{grid-template-columns:1fr}
}

.chunk-note{
  margin-top:8px;
  padding:8px 10px;
  border:1px solid #4b173d;
  border-radius:8px;
  background:#0a060e;
  color:#a99daa;
  font-size:9px;
}


/* =========================================================
   ADMIN > EDITAR — TIPOGRAFÍA MÁS GRANDE Y LEGIBLE
   ========================================================= */
.admin-edit-page,
.edit-page,
.edit-form,
.adminpanel .form{
  font-size:15px!important;
}

.adminpanel .form label,
.edit-form label,
.admin-edit-page label{
  font-size:14px!important;
  line-height:1.45!important;
  font-weight:700!important;
  color:#f4edf5!important;
}

.adminpanel .form input,
.adminpanel .form select,
.adminpanel .form textarea,
.edit-form input,
.edit-form select,
.edit-form textarea,
.admin-edit-page input,
.admin-edit-page select,
.admin-edit-page textarea{
  font-size:15px!important;
  line-height:1.4!important;
  min-height:44px!important;
}

.adminpanel .form textarea,
.edit-form textarea,
.admin-edit-page textarea{
  min-height:120px!important;
}

.adminpanel .form small,
.edit-form small,
.admin-edit-page small,
.current-file,
.field-help{
  font-size:12px!important;
  line-height:1.45!important;
}

.adminpanel h1,
.adminpanel h2,
.edit-page h1,
.edit-page h2,
.admin-edit-page h1,
.admin-edit-page h2{
  font-size:22px!important;
  line-height:1.25!important;
}

.adminpanel h3,
.edit-page h3,
.admin-edit-page h3{
  font-size:17px!important;
}

.edit-btn,
.danger,
.primary-admin-btn,
.admin-row-actions button,
.adminpanel button{
  font-size:12px!important;
  min-height:38px!important;
  padding:9px 13px!important;
}

.track-option b,
.track-info b,
.ad-admin-copy b{
  font-size:13px!important;
}

.track-option small,
.track-info small,
.ad-admin-copy small{
  font-size:11px!important;
}

@media(max-width:700px){
  .adminpanel .form label,
  .edit-form label,
  .admin-edit-page label{
    font-size:14px!important;
  }

  .adminpanel .form input,
  .adminpanel .form select,
  .adminpanel .form textarea,
  .edit-form input,
  .edit-form select,
  .edit-form textarea{
    font-size:16px!important; /* evita zoom incómodo en móviles */
  }
}


/* Portada automática desde metadata ID3 del MP3 */
.auto-cover-card{
  position:relative;
}

.auto-cover-note{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top:8px;
  padding:5px 8px;
  border:1px solid #65461B;
  border-radius:999px;
  background:rgba(255,212,42,.08);
  color:#FFD42A;
  font-size:9px;
  font-weight:900;
  letter-spacing:1px;
}

.auto-cover-card small{
  line-height:1.45;
}


/* =========================================================
   URBAN DARK — menos rosa, títulos blancos
   ========================================================= */
:root{
  --urban-bg:#050507;
  --urban-bg2:#0A0A0D;
  --urban-panel:#0E0E12;
  --urban-panel2:#15151A;
  --urban-line:#2B2B33;

  --urban-white:#FFFFFF;
  --urban-muted:#A8A8B2;

  --urban-purple:#c58b32;
  --urban-blue:#b51b1b;
  --urban-yellow:#F1C93B;
  --urban-pink:#C92878;
}

html,body{
  background:
    radial-gradient(circle at 10% 0%,rgba(109,74,255,.08),transparent 26%),
    radial-gradient(circle at 95% 35%,rgba(36,123,255,.06),transparent 22%),
    #050507!important;
  color:#fff!important;
}

.site{
  background:linear-gradient(180deg,#09090D,#050507)!important;
  border-color:#23232A!important;
  box-shadow:0 0 70px rgba(0,0,0,.35)!important;
}

/* títulos completamente blancos */
.section-title h2,
.panel-title b,
.panel-head-pro h2,
.admintitle h1,
.listing-hero h1,
.detail-meta h1,
.video-detail h1,
.legal-hero h1,
.music-meta b,
.listing-meta h3,
.video-meta h3,
.news-list-meta h3,
.news-copy b,
.track-info b,
.side-copy b{
  color:#fff!important;
}

/* rosa solo como detalle secundario */
.section-title i{
  background:linear-gradient(90deg,transparent,var(--urban-purple),var(--urban-blue),transparent)!important;
}

.section-title-with-link a,
.detail-kicker,
.listing-hero small,
.video-detail>small,
.legal-hero small,
.panel-head-pro small{
  color:#B9AAFF!important;
}

/* tarjetas urbanas */
.music-card,
.video-card,
.news-card,
.listing-card,
.related-card,
.related-news-card,
.panel,
.adminpanel,
.metric,
.detail-card,
.legal-card,
.share-card,
.video-share-card,
.album-track-row,
.top-mode-panel{
  background:linear-gradient(145deg,#101015,#0A0A0E)!important;
  border-color:#2C2C34!important;
}

.music-card:hover,
.video-card:hover,
.listing-card:hover,
.related-card:hover,
.album-track-row:hover{
  border-color:#5643A8!important;
  box-shadow:0 10px 26px rgba(109,74,255,.10)!important;
}

/* botones: violeta/azul, no rosa */
.primary-admin-btn,
.detail-play,
.contact-form button,
.login button,
.cover button,
.round-btn,
.album-track-play,
.video-cover>span,
.related-play,
.player-controls .main-play{
  background:linear-gradient(135deg,var(--urban-purple),var(--urban-blue))!important;
  color:#fff!important;
  box-shadow:0 0 18px rgba(109,74,255,.18)!important;
}

.detail-download,
.share-btn,
.edit-btn{
  background:#141419!important;
  border-color:#34343D!important;
  color:#fff!important;
}

.detail-download:hover,
.share-btn:hover,
.edit-btn:hover{
  border-color:#6152B9!important;
  background:#1B1B22!important;
}

/* amarillo como acento urbano */
.ad-copy a,
.rank,
.side-rank{
  background:var(--urban-yellow)!important;
  color:#111!important;
}

/* admin */
.adminside{
  background:#09090D!important;
  border-color:#202027!important;
}

.adminside a{
  color:#B5B5BF!important;
}

.adminside a:hover,
.adminside a.active{
  background:linear-gradient(90deg,rgba(109,74,255,.20),rgba(36,123,255,.06))!important;
  color:#fff!important;
  border-color:#5B4DB0!important;
  box-shadow:none!important;
}

/* inputs */
.form input,
.form select,
.form textarea,
.contact-form input,
.contact-form textarea,
.login input{
  background:#0C0C10!important;
  border-color:#303038!important;
  color:#fff!important;
}

.form input:focus,
.form select:focus,
.form textarea:focus,
.contact-form input:focus,
.contact-form textarea:focus,
.login input:focus{
  border-color:#5C50B7!important;
  box-shadow:0 0 0 3px rgba(109,74,255,.10)!important;
}

/* player */
.player{
  background:rgba(8,8,12,.98)!important;
  border-color:#26262D!important;
}

.player input[type=range]{
  accent-color:var(--urban-purple)!important;
}

/* publicidad conserva impacto pero menos rosa */
.ad-card{
  background:
    radial-gradient(circle at 35% 45%,rgba(109,74,255,.24),transparent 34%),
    radial-gradient(circle at 72% 28%,rgba(36,123,255,.16),transparent 26%),
    linear-gradient(120deg,#10101B,#171322)!important;
  border-color:#4A405E!important;
}

/* pequeños detalles rosa únicamente donde ayuda */
.auto-cover-note{
  border-color:#5E4D22!important;
  color:#F1C93B!important;
  background:rgba(241,201,59,.06)!important;
}

.top-mode-panel{
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:center;
  margin-bottom:16px;
  padding:16px 18px;
  border:1px solid #2C2C34;
  border-radius:12px;
}
.top-mode-panel small{
  color:#B9AAFF;
  font-size:9px;
  font-weight:900;
  letter-spacing:1.5px;
}
.top-mode-panel h2{
  color:#fff;
  margin:4px 0;
  font-size:18px;
}
.top-mode-panel p{
  margin:0;
  color:#9999A5;
  font-size:10px;
  line-height:1.5;
  max-width:620px;
}
.top-mode-form{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.top-mode-form label{
  display:flex;
  align-items:center;
  gap:5px;
  color:#D6D6DD;
  font-size:11px;
}

@media(max-width:760px){
  .top-mode-panel{
    flex-direction:column;
    align-items:flex-start;
  }
}


/* =========================================================
   PALETA FINAL — URBAN RED
   Principal: #8c0000
   Complementario: cobre/dorado oscuro
   Sin rosa ni azul eléctrico
   ========================================================= */
:root{
  --urban-red:#8c0000;
  --urban-red-light:#b51b1b;
  --urban-red-dark:#4d0000;
  --urban-accent:#c58b32;
  --urban-accent-light:#e0ad55;
  --urban-bg:#050505;
  --urban-panel:#0e0e0f;
  --urban-panel2:#151516;
  --urban-line:#34302f;
  --urban-text:#ffffff;
  --urban-muted:#aaa4a2;

  /* sobrescribe variables anteriores */
  --urban-pink:#8c0000;
  --urban-pink2:#b51b1b;
  --urban-purple:#8c0000;
  --urban-blue:#c58b32;
  --urban-yellow:#c58b32;
}

html,body{
  background:
    radial-gradient(circle at 8% 4%,rgba(140,0,0,.15),transparent 28%),
    radial-gradient(circle at 96% 45%,rgba(197,139,50,.055),transparent 24%),
    #050505!important;
}

.site{
  background:linear-gradient(180deg,#090909,#050505)!important;
  border-color:#302727!important;
}

/* títulos se mantienen blancos */
.section-title h2,
.panel-title b,
.panel-head-pro h2,
.admintitle h1,
.listing-hero h1,
.detail-meta h1,
.video-detail h1,
.legal-hero h1,
.music-meta b,
.listing-meta h3,
.video-meta h3,
.news-list-meta h3,
.news-copy b,
.track-info b,
.side-copy b,
.top-mode-panel h2{
  color:#fff!important;
}

/* acentos */
.section-title i{
  background:linear-gradient(90deg,transparent,#8c0000,#c58b32,transparent)!important;
  box-shadow:0 0 10px rgba(140,0,0,.20)!important;
}

.section-title-with-link a,
.detail-kicker,
.listing-hero small,
.video-detail>small,
.legal-hero small,
.panel-head-pro small,
.top-mode-panel small{
  color:#c58b32!important;
}

/* tarjetas */
.music-card,
.video-card,
.news-card,
.listing-card,
.related-card,
.related-news-card,
.panel,
.adminpanel,
.metric,
.detail-card,
.legal-card,
.share-card,
.video-share-card,
.album-track-row,
.top-mode-panel{
  background:linear-gradient(145deg,#111111,#090909)!important;
  border-color:#382d2d!important;
}

.music-card:hover,
.video-card:hover,
.listing-card:hover,
.related-card:hover,
.album-track-row:hover{
  border-color:#8c0000!important;
  box-shadow:0 12px 28px rgba(140,0,0,.16)!important;
}

/* botones principales */
.primary-admin-btn,
.detail-play,
.contact-form button,
.login button,
.cover button,
.round-btn,
.album-track-play,
.video-cover>span,
.related-play,
.player-controls .main-play{
  background:linear-gradient(135deg,#8c0000,#b51b1b)!important;
  color:#fff!important;
  box-shadow:0 0 18px rgba(140,0,0,.22)!important;
}

/* botones secundarios */
.detail-download,
.share-btn,
.edit-btn{
  background:#151212!important;
  border-color:#4c3631!important;
  color:#fff!important;
}
.detail-download:hover,
.share-btn:hover,
.edit-btn:hover{
  border-color:#8c0000!important;
  background:#211515!important;
}

/* acento cobre/dorado */
.ad-copy a,
.rank,
.side-rank{
  background:#c58b32!important;
  color:#111!important;
}

/* navegación */
.adminside{
  background:#090909!important;
  border-color:#292222!important;
}
.adminside a:hover,
.adminside a.active,
.topbar nav a:hover,
.topbar nav a.active{
  background:linear-gradient(90deg,#8c0000,#5e0000)!important;
  color:#fff!important;
  border-color:#8c0000!important;
  box-shadow:none!important;
}

/* formularios */
.form input,
.form select,
.form textarea,
.contact-form input,
.contact-form textarea,
.login input{
  background:#0c0c0c!important;
  border-color:#3b3230!important;
  color:#fff!important;
}
.form input:focus,
.form select:focus,
.form textarea:focus,
.contact-form input:focus,
.contact-form textarea:focus,
.login input:focus{
  border-color:#8c0000!important;
  box-shadow:0 0 0 3px rgba(140,0,0,.14)!important;
}

/* reproductor */
.player{
  background:rgba(8,8,8,.98)!important;
  border-color:#332828!important;
}
.player input[type=range]{
  accent-color:#8c0000!important;
}

/* publicidad */
.ad-card{
  background:
    radial-gradient(circle at 30% 45%,rgba(140,0,0,.30),transparent 36%),
    radial-gradient(circle at 75% 25%,rgba(197,139,50,.12),transparent 28%),
    linear-gradient(120deg,#130909,#1b1010)!important;
  border-color:#633131!important;
}

/* paginación */
.pagination a.active,
.pagination a:hover{
  background:linear-gradient(90deg,#8c0000,#b51b1b)!important;
  color:#fff!important;
}

/* barra de progreso */
.upload-progress-bar{
  background:linear-gradient(90deg,#8c0000,#b51b1b,#c58b32)!important;
}
.upload-progress-head small{
  color:#c58b32!important;
}
.upload-progress-head strong{
  color:#e0ad55!important;
}

/* franja decorativa */
.urban-divider{
  border-color:#4b2929!important;
  background:linear-gradient(90deg,#0b0808,#180b0b,#0a0808)!important;
}
.urban-divider span,
.urban-divider b{
  color:#c58b32!important;
}
.urban-divider i{
  background:linear-gradient(90deg,#8c0000,#c58b32,#8c0000)!important;
}

/* portada automática */
.auto-cover-note{
  border-color:#684a22!important;
  color:#e0ad55!important;
  background:rgba(197,139,50,.07)!important;
}


/* =========================================================
   VIDEOS DESTACADOS — PRIMERA SECCIÓN DE LA PORTADA
   ========================================================= */
.home-video-showcase{
  margin:0 0 22px;
  padding:14px;
  border:1px solid #382525;
  border-radius:15px;
  background:
    radial-gradient(circle at 12% 0%,rgba(140,0,0,.17),transparent 32%),
    linear-gradient(145deg,#101010,#080808);
  box-shadow:0 18px 50px rgba(0,0,0,.28);
}

.video-showcase-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  padding:2px 2px 13px;
}

.video-showcase-heading small{
  display:block;
  margin-bottom:4px;
  color:#c58b32!important;
  font-size:9px!important;
  font-weight:900;
  letter-spacing:1.7px;
}

.video-showcase-heading h2{
  margin:0;
  color:#fff!important;
  font-size:22px!important;
  line-height:1.05;
  letter-spacing:.2px;
}

.video-showcase-heading a{
  color:#d7b36d!important;
  text-decoration:none;
  font-size:9px!important;
  font-weight:900;
  white-space:nowrap;
}

.video-showcase-heading a:hover{
  color:#fff!important;
}

.video-showcase-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  grid-auto-rows:150px;
  gap:9px;
}

.video-showcase-card{
  position:relative;
  min-width:0;
  overflow:hidden;
  border:1px solid #422727;
  border-radius:11px;
  background:#090909;
  box-shadow:0 8px 20px rgba(0,0,0,.20);
}

.video-showcase-featured{
  grid-column:span 2;
  grid-row:span 2;
}

.video-showcase-link{
  position:absolute;
  inset:0;
  display:block;
  overflow:hidden;
  color:#fff;
  text-decoration:none;
}

.video-showcase-link img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:
    transform .45s cubic-bezier(.2,.7,.2,1),
    filter .35s ease;
}

.video-showcase-shade{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,rgba(0,0,0,.03) 20%,rgba(0,0,0,.22) 54%,rgba(0,0,0,.92) 100%);
  transition:background .35s ease;
}

.video-showcase-copy{
  position:absolute;
  z-index:3;
  left:13px;
  right:13px;
  bottom:11px;
  transform:translateY(0);
  transition:transform .35s ease;
}

.video-showcase-copy small{
  display:block;
  margin-bottom:4px;
  color:#d7b36d!important;
  font-size:7px!important;
  font-weight:800;
}

.video-showcase-copy h3{
  margin:0;
  color:#fff!important;
  font-size:13px!important;
  line-height:1.22;
  text-shadow:0 2px 8px rgba(0,0,0,.85);
}

.video-showcase-featured .video-showcase-copy h3{
  font-size:21px!important;
  max-width:90%;
}

.video-showcase-copy p{
  margin:4px 0 0;
  color:#d0c8c8!important;
  font-size:8px!important;
}

.video-showcase-play{
  position:absolute;
  z-index:4;
  top:11px;
  right:11px;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.20);
  border-radius:50%;
  background:rgba(140,0,0,.90);
  color:#fff;
  box-shadow:0 5px 18px rgba(0,0,0,.28);
  transform:scale(.96);
  transition:transform .35s ease,background .35s ease;
}

.video-showcase-featured .video-showcase-play{
  width:46px;
  height:46px;
  font-size:15px;
}

.video-showcase-card:hover{
  border-color:#8c0000!important;
}

.video-showcase-card:hover .video-showcase-link img{
  transform:scale(1.09);
  filter:brightness(1.08) contrast(1.04);
}

.video-showcase-card:hover .video-showcase-shade{
  background:
    linear-gradient(180deg,rgba(140,0,0,.05) 10%,rgba(0,0,0,.17) 48%,rgba(0,0,0,.94) 100%);
}

.video-showcase-card:hover .video-showcase-copy{
  transform:translateY(-4px);
}

.video-showcase-card:hover .video-showcase-play{
  transform:scale(1.10);
  background:#b51b1b;
}

@media(max-width:900px){
  .video-showcase-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-auto-rows:155px;
  }

  .video-showcase-featured{
    grid-column:span 2;
    grid-row:span 2;
  }
}

@media(max-width:600px){
  .home-video-showcase{
    padding:10px;
  }

  .video-showcase-heading{
    align-items:flex-start;
    flex-direction:column;
    gap:7px;
  }

  .video-showcase-heading h2{
    font-size:19px!important;
  }

  .video-showcase-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-auto-rows:125px;
    gap:7px;
  }

  .video-showcase-featured{
    grid-column:span 2;
    grid-row:span 2;
  }

  .video-showcase-featured .video-showcase-copy h3{
    font-size:18px!important;
  }

  .video-showcase-copy h3{
    font-size:11px!important;
  }

  .video-showcase-copy p{
    display:none;
  }
}


/* =========================================================
   PORTADA FINAL — 1 VIDEO GRANDE + 3 A LA DERECHA
   ========================================================= */
.video-showcase-grid{
  display:grid!important;
  grid-template-columns:minmax(0,2fr) minmax(250px,1fr)!important;
  grid-template-rows:repeat(3,100px)!important;
  gap:9px!important;
}

.video-showcase-card{
  min-height:0!important;
}

.video-showcase-featured{
  grid-column:1!important;
  grid-row:1 / span 3!important;
}

.video-showcase-card:not(.video-showcase-featured){
  grid-column:2!important;
}

.video-showcase-card:not(.video-showcase-featured) .video-showcase-copy h3{
  font-size:12px!important;
}

.video-showcase-card:not(.video-showcase-featured) .video-showcase-play{
  width:28px!important;
  height:28px!important;
  font-size:10px!important;
}

/* Banner publicitario: ancho completo, sin los 3 cuadros laterales */
.hero-grid{
  display:block!important;
}

.hero-grid > .side-list,
.hero-grid > .side-cards,
.hero-grid > aside,
.hero-grid > .hero-side{
  display:none!important;
}

.hero-grid > .ad-card,
.hero-grid > .feature-card,
.hero-grid > .hero-main{
  width:100%!important;
  max-width:none!important;
}

.ad-card{
  width:100%!important;
  min-height:190px!important;
}

.ad-card img,
.ad-wide-card img{
  width:100%!important;
  height:100%!important;
  min-height:190px!important;
  object-fit:cover!important;
}

@media(max-width:760px){
  .video-showcase-grid{
    grid-template-columns:1fr!important;
    grid-template-rows:230px repeat(3,120px)!important;
  }

  .video-showcase-featured,
  .video-showcase-card:not(.video-showcase-featured){
    grid-column:1!important;
  }

  .video-showcase-featured{
    grid-row:1!important;
  }

  .ad-card,
  .ad-card img,
  .ad-wide-card img{
    min-height:140px!important;
  }
}

/* PORTADA: un único banner publicitario */
.hero-grid{display:block!important;width:100%!important;margin-bottom:20px!important}
.hero-grid .ad-card{width:100%!important;max-width:none!important;min-height:210px!important;border-radius:14px!important;overflow:hidden!important}
.hero-grid .ad-image-link{display:block!important;width:100%!important;min-height:210px!important}
.hero-grid .ad-image-link img{display:block!important;width:100%!important;height:210px!important;object-fit:cover!important}
.hero-grid .ad-card:not(.ad-card-dynamic){display:flex!important;align-items:center!important;justify-content:center!important;text-align:center!important;padding:30px!important}
@media(max-width:700px){
 .hero-grid .ad-card,.hero-grid .ad-image-link{min-height:155px!important}
 .hero-grid .ad-image-link img{height:155px!important}
}


/* =========================================================
   SECTORURBANO — PALETA UNIFICADA EN TODAS LAS SECCIONES
   Negro / grafito / #8c0000 / cobre #c58b32
   ========================================================= */
:root{
  --su-red:#8c0000;
  --su-red-light:#b51b1b;
  --su-red-dark:#4d0000;
  --su-gold:#c58b32;
  --su-gold-light:#e0ad55;
  --su-bg:#050505;
  --su-panel:#0e0e0f;
  --su-panel-2:#151516;
  --su-border:#393030;
  --su-text:#fff;
  --su-muted:#aaa3a3;
}

html,body,.site{
  background-color:#050505!important;
  color:#fff!important;
}

/* Todos los títulos quedan blancos */
.section-title h2,
.panel-title b,
.listing-hero h1,
.detail-meta h1,
.video-detail h1,
.legal-hero h1,
.news-list-meta h3,
.listing-meta h3,
.video-meta h3,
.music-meta b,
.news-copy b,
.track-info b,
.side-copy b,
.related-meta h3,
.related-news-card h3,
.adminpanel h1,
.adminpanel h2,
.adminpanel h3,
.admintitle h1{
  color:#fff!important;
}

/* Metadatos/acento: cobre, nunca rosado */
.listing-hero small,
.detail-kicker,
.video-detail>small,
.legal-hero small,
.listing-meta small,
.video-meta small,
.news-list-meta small,
.news-copy small,
.related-meta small,
.related-news-card small,
.panel-head-pro small,
.section-title-with-link a{
  color:var(--su-gold)!important;
}

.section-title i,
.panel-title i{
  background:linear-gradient(90deg,transparent,var(--su-red),var(--su-gold),transparent)!important;
}

/* Tarjetas/secciones secundarias */
.listing-hero,
.listing-card,
.news-list-card,
.video-card,
.detail-card,
.related-card,
.related-news-card,
.legal-card,
.legal-hero,
.panel,
.music-card,
.adminpanel,
.metric,
.album-track-row,
.share-card,
.video-share-card{
  background:linear-gradient(145deg,#111,#090909)!important;
  border-color:var(--su-border)!important;
}

.listing-card:hover,
.news-list-card:hover,
.video-card:hover,
.music-card:hover,
.related-card:hover,
.album-track-row:hover{
  border-color:var(--su-red)!important;
  box-shadow:0 10px 25px rgba(140,0,0,.14)!important;
}

/* Portadas sin violeta/azul */
.listing-cover,
.news-list-image,
.related-cover,
.detail-cover,
.media-admin-cover,
.track-option-cover,
.album-track-cover{
  background:linear-gradient(135deg,#321515,#8c0000)!important;
}

/* Botones */
.primary-admin-btn,
.detail-play,
.contact-form button,
.login button,
.album-track-play,
.video-cover>span,
.related-play,
.cover button,
.round-btn{
  background:linear-gradient(135deg,var(--su-red),var(--su-red-light))!important;
  color:#fff!important;
  box-shadow:0 0 18px rgba(140,0,0,.18)!important;
}

.detail-download,
.share-btn,
.edit-btn{
  background:#151212!important;
  border-color:#4a3633!important;
  color:#fff!important;
}

.detail-download:hover,
.share-btn:hover,
.edit-btn:hover{
  border-color:var(--su-red)!important;
  background:#211515!important;
}

/* Forms/admin */
.form input,.form select,.form textarea,
.contact-form input,.contact-form textarea,
.login input,
.edit-form input,.edit-form select,.edit-form textarea{
  background:#0c0c0c!important;
  border-color:#3b3230!important;
  color:#fff!important;
}

.form input:focus,.form select:focus,.form textarea:focus,
.contact-form input:focus,.contact-form textarea:focus,
.login input:focus,
.edit-form input:focus,.edit-form select:focus,.edit-form textarea:focus{
  border-color:var(--su-red)!important;
  box-shadow:0 0 0 3px rgba(140,0,0,.12)!important;
}

.adminside{
  background:#090909!important;
  border-color:#292222!important;
}

.adminside a:hover,
.adminside a.active,
.topbar nav a:hover,
.topbar nav a.active{
  background:linear-gradient(90deg,#8c0000,#5e0000)!important;
  color:#fff!important;
  border-color:#8c0000!important;
  box-shadow:none!important;
}

.pagination a.active,
.pagination a:hover{
  background:linear-gradient(90deg,#8c0000,#b51b1b)!important;
  color:#fff!important;
}

/* =========================================================
   SIDEBAR IZQUIERDA — MÁS DESCARGADOS
   ========================================================= */
.layout{
  grid-template-columns:285px minmax(0,1fr)!important;
}

.layout > .sidebar{
  grid-column:1!important;
  grid-row:1!important;
}

.layout > .main{
  grid-column:2!important;
  grid-row:1!important;
}

.sidebar-downloads{
  align-self:start;
}

.download-side-panel{
  padding:10px!important;
  margin-bottom:12px;
}

.download-side-list{
  display:grid;
  gap:7px;
}

.download-side-row{
  display:grid;
  grid-template-columns:24px 46px minmax(0,1fr);
  align-items:center;
  gap:8px;
  padding:7px;
  border:1px solid #292323;
  border-radius:9px;
  background:#0b0b0c;
  color:#fff;
  text-decoration:none;
  transition:.2s ease;
}

.download-side-row:hover{
  border-color:#8c0000;
  background:#140c0c;
  transform:translateX(2px);
}

.download-side-rank{
  width:23px;
  height:23px;
  display:grid;
  place-items:center;
  border-radius:6px;
  background:#8c0000;
  color:#fff;
  font-size:9px;
  font-weight:900;
}

.download-side-cover{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border-radius:7px;
  background:linear-gradient(135deg,#321515,#8c0000);
}

.download-side-cover img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.download-side-copy{
  min-width:0;
}

.download-side-copy b,
.download-side-copy small,
.download-side-copy em{
  display:block;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.download-side-copy b{
  font-size:10px!important;
  color:#fff!important;
}

.download-side-copy small{
  margin-top:2px;
  color:#aaa3a3!important;
  font-size:8px!important;
}

.download-side-copy em{
  margin-top:4px;
  color:#c58b32!important;
  font-style:normal;
  font-size:8px!important;
  font-weight:800;
}

/* Páginas secundarias con sidebar izquierda */
.secondary-layout{
  width:min(1240px,96%);
  margin:0 auto;
  display:grid;
  grid-template-columns:270px minmax(0,1fr);
  gap:16px;
  align-items:start;
}

.secondary-layout .listing-page{
  width:100%!important;
  margin:0!important;
  min-width:0;
}

.secondary-left-sidebar{
  position:sticky;
  top:82px;
  padding-top:28px;
}

@media(max-width:1000px){
  .layout{
    grid-template-columns:240px minmax(0,1fr)!important;
  }

  .secondary-layout{
    grid-template-columns:230px minmax(0,1fr);
  }
}

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

  .layout > .sidebar,
  .layout > .main{
    grid-column:1!important;
  }

  .layout > .main{
    grid-row:1!important;
  }

  .layout > .sidebar{
    grid-row:2!important;
  }

  .secondary-layout{
    display:block;
    width:94%;
  }

  .secondary-left-sidebar{
    position:static;
    padding-top:16px;
  }

  .secondary-left-sidebar{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
  }
}

@media(max-width:520px){
  .secondary-left-sidebar{
    grid-template-columns:1fr;
  }
}


/* =========================================================
   AJUSTE FINAL — SITIO 1280PX + DESCARGADOS A LA DERECHA
   ========================================================= */

/* ancho general más compacto */
.site{
  width:min(1280px,100%)!important;
  max-width:1280px!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

.topbar,
.layout,
.footer-inner{
  width:100%!important;
  max-width:1280px!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

/* portada: contenido principal izquierda + sidebar derecha */
.layout{
  grid-template-columns:minmax(0,1fr) 270px!important;
  gap:16px!important;
}

.layout > .main{
  grid-column:1!important;
  grid-row:1!important;
  min-width:0!important;
}

.layout > .sidebar{
  grid-column:2!important;
  grid-row:1!important;
  align-self:start!important;
}

/* páginas secundarias: sidebar de descargados a la derecha */
.secondary-layout{
  width:min(1280px,96%)!important;
  max-width:1280px!important;
  grid-template-columns:minmax(0,1fr) 270px!important;
  gap:16px!important;
}

.secondary-layout .listing-page{
  grid-column:1!important;
  grid-row:1!important;
}

.secondary-right-sidebar{
  grid-column:2!important;
  grid-row:1!important;
  position:sticky!important;
  top:82px!important;
  padding-top:28px!important;
}

/* sidebar un poco más compacta para el nuevo ancho */
.download-side-panel{
  padding:9px!important;
}

.download-side-row{
  grid-template-columns:22px 42px minmax(0,1fr)!important;
  gap:7px!important;
  padding:6px!important;
}

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

@media(max-width:1000px){
  .layout{
    grid-template-columns:minmax(0,1fr) 235px!important;
  }

  .secondary-layout{
    grid-template-columns:minmax(0,1fr) 235px!important;
  }
}

@media(max-width:760px){
  .site{
    width:100%!important;
  }

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

  .layout > .main{
    grid-column:1!important;
    grid-row:1!important;
  }

  .layout > .sidebar{
    grid-column:1!important;
    grid-row:2!important;
  }

  .secondary-layout{
    display:block!important;
    width:94%!important;
  }

  .secondary-right-sidebar{
    position:static!important;
    padding-top:16px!important;
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:10px!important;
  }
}

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


/* =========================================================
   LIVE SEARCH
   ========================================================= */
.live-search-form{
  position:relative!important;
  overflow:visible!important;
  z-index:120;
}

.live-search-panel{
  display:none;
  position:absolute;
  z-index:9999;
  top:calc(100% + 7px);
  right:0;
  width:min(470px,90vw);
  max-height:520px;
  overflow:auto;
  padding:7px;
  border:1px solid #493030;
  border-radius:12px;
  background:rgba(10,10,10,.985);
  box-shadow:0 22px 55px rgba(0,0,0,.55);
}

.live-search-panel.show{
  display:block;
}

.inner-search .live-search-panel{
  left:0;
  right:auto;
  width:100%;
}

.live-search-item{
  display:grid;
  grid-template-columns:48px minmax(0,1fr) auto;
  align-items:center;
  gap:9px;
  padding:8px;
  border-radius:9px;
  color:#fff!important;
  text-decoration:none!important;
  transition:.18s ease;
}

.live-search-item:hover,
.live-search-item:focus{
  outline:none;
  background:#171010;
}

.live-search-cover{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border-radius:7px;
  background:linear-gradient(135deg,#321515,#8c0000);
}

.live-search-cover img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.live-search-copy{
  min-width:0;
}

.live-search-copy small,
.live-search-copy b,
.live-search-copy em{
  display:block;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.live-search-copy small{
  color:#c58b32!important;
  font-size:8px!important;
  font-weight:900;
  letter-spacing:.7px;
}

.live-search-copy b{
  margin-top:2px;
  color:#fff!important;
  font-size:11px!important;
}

.live-search-copy em{
  margin-top:2px;
  color:#aaa3a3!important;
  font-size:9px!important;
  font-style:normal;
}

.live-search-downloads{
  color:#c58b32;
  font-size:9px;
  font-weight:800;
  white-space:nowrap;
}

.live-search-all{
  display:block;
  margin-top:5px;
  padding:10px;
  border-top:1px solid #332828;
  color:#e0ad55!important;
  text-align:center;
  text-decoration:none!important;
  font-size:9px;
  font-weight:900;
}

.live-search-empty,
.live-search-loading{
  padding:14px;
  color:#aaa3a3;
  font-size:10px;
  text-align:center;
}

.search-empty{
  padding:30px;
  border:1px dashed #403434;
  border-radius:12px;
  background:#0b0b0c;
  color:#aaa3a3;
  text-align:center;
  font-size:12px;
}

@media(max-width:760px){
  .top-search.live-search-form{
    display:flex!important;
    order:5;
    width:100%;
    margin-top:8px;
  }

  .top-search .live-search-panel{
    left:0;
    right:0;
    width:100%;
  }

  .live-search-item{
    grid-template-columns:44px minmax(0,1fr);
  }

  .live-search-cover{
    width:44px;
    height:44px;
  }

  .live-search-downloads{
    display:none;
  }
}


/* MP3 / MIXES portada: portada y título abren la publicación; Play solo reproduce */
.cover-link,
.top-cover-link{
  display:block;
  color:inherit;
  text-decoration:none;
}

.cover-link{
  width:100%;
  height:100%;
}

.cover-link img,
.top-cover-link img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.music-card .content-link,
.top-item .content-link{
  color:#fff!important;
  text-decoration:none!important;
}

.music-card .content-link:hover,
.top-item .content-link:hover{
  color:#c58b32!important;
}

.music-card .cover-link img,
.top-cover-link img{
  transition:transform .28s ease,filter .28s ease;
}

@media(hover:hover) and (pointer:fine){
  .music-card .cover-link:hover img,
  .top-cover-link:hover img{
    transform:scale(1.045);
    filter:brightness(1.06);
  }
}


/* =========================================================
   EDITOR WYSIWYG — NOTICIAS
   ========================================================= */
.wysiwyg-editor{
  overflow:hidden;
  border:1px solid #3b3230;
  border-radius:10px;
  background:#0c0c0c;
}

.wysiwyg-editor:focus-within{
  border-color:#8c0000;
  box-shadow:0 0 0 3px rgba(140,0,0,.12);
}

.wysiwyg-toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  padding:8px;
  border-bottom:1px solid #352b29;
  background:#111;
}

.wysiwyg-btn{
  width:auto!important;
  min-width:34px!important;
  min-height:32px!important;
  margin:0!important;
  padding:6px 9px!important;
  border:1px solid #453634!important;
  border-radius:6px!important;
  background:#191414!important;
  color:#fff!important;
  font-size:11px!important;
  font-weight:700!important;
  cursor:pointer;
  box-shadow:none!important;
}

.wysiwyg-btn:hover,
.wysiwyg-btn.active{
  border-color:#8c0000!important;
  background:#8c0000!important;
  color:#fff!important;
}

.wysiwyg-content,
.wysiwyg-source{
  width:100%!important;
  min-height:320px!important;
  max-height:620px;
  overflow:auto;
  padding:16px!important;
  border:0!important;
  outline:0!important;
  border-radius:0!important;
  background:#0c0c0c!important;
  color:#eee!important;
  font-family:inherit!important;
  font-size:15px!important;
  line-height:1.7!important;
  box-shadow:none!important;
}

.wysiwyg-content h2{
  margin:18px 0 8px;
  color:#fff!important;
  font-size:24px!important;
}

.wysiwyg-content h3{
  margin:16px 0 7px;
  color:#fff!important;
  font-size:19px!important;
}

.wysiwyg-content p{
  margin:0 0 12px;
}

.wysiwyg-content blockquote{
  margin:14px 0;
  padding:10px 14px;
  border-left:3px solid #8c0000;
  background:#151010;
  color:#d9d2d2;
}

.wysiwyg-content a{
  color:#c58b32!important;
}

.wysiwyg-content ul,
.wysiwyg-content ol{
  padding-left:25px;
}

.wysiwyg-source{
  resize:vertical!important;
  font-family:Consolas,Monaco,monospace!important;
  font-size:13px!important;
}

@media(max-width:700px){
  .wysiwyg-content,
  .wysiwyg-source{
    min-height:260px!important;
    font-size:16px!important;
  }

  .wysiwyg-toolbar{
    gap:4px;
  }

  .wysiwyg-btn{
    padding:6px 8px!important;
  }
}


/* WYSIWYG noticias - corrección visible */
.news-editor-label{
  display:block;
  margin:4px 0 7px;
  color:#fff!important;
  font-size:13px!important;
  font-weight:800!important;
}

.news-editor-help{
  display:block;
  margin-top:7px;
  color:#aaa3a3!important;
  font-size:11px!important;
}

.wysiwyg-editor{
  display:block!important;
  width:100%!important;
  margin-top:7px!important;
  border:1px solid #493030!important;
  border-radius:11px!important;
  overflow:hidden!important;
  background:#0b0b0c!important;
}

.wysiwyg-toolbar{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:6px!important;
  padding:9px!important;
  background:#141111!important;
  border-bottom:1px solid #3c2d2d!important;
}

.wysiwyg-btn{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:36px!important;
  min-height:34px!important;
  padding:6px 9px!important;
  border:1px solid #4b3935!important;
  border-radius:7px!important;
  background:#1a1515!important;
  color:#fff!important;
  font-size:12px!important;
  cursor:pointer!important;
}

.wysiwyg-btn:hover,
.wysiwyg-btn.active{
  background:#8c0000!important;
  border-color:#8c0000!important;
}

.wysiwyg-content{
  min-height:330px!important;
  padding:16px!important;
  background:#0b0b0c!important;
  color:#f2eeee!important;
  font-size:15px!important;
  line-height:1.75!important;
  outline:none!important;
}

.wysiwyg-content h2{
  color:#fff!important;
  font-size:24px!important;
}

.wysiwyg-content h3{
  color:#fff!important;
  font-size:19px!important;
}

.wysiwyg-source{
  min-height:330px!important;
  padding:14px!important;
  background:#080809!important;
  color:#ddd!important;
  font-size:13px!important;
}


/* =========================================================
   MIXES — SELECTOR DE PORTADA
   ========================================================= */
.mix-cover-selector{
  display:grid;
  grid-template-columns:220px minmax(0,1fr);
  gap:16px;
  margin:14px 0;
  padding:14px;
  border:1px solid #3b3030;
  border-radius:12px;
  background:#0c0c0d;
}

.mix-cover-preview{
  overflow:hidden;
  border:1px solid #4b3030;
  border-radius:10px;
  background:#080808;
}

.mix-cover-preview img{
  display:block;
  width:100%;
  height:100%;
  min-height:190px;
  object-fit:cover;
}

.mix-cover-title small{
  color:#c58b32!important;
  font-size:9px!important;
  font-weight:900;
  letter-spacing:1.3px;
}

.mix-cover-title h3{
  margin:4px 0 12px;
  color:#fff!important;
  font-size:16px!important;
}

.mix-cover-options{
  display:grid;
  gap:8px;
}

.mix-cover-choice{
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr);
  align-items:flex-start;
  gap:9px;
  padding:10px!important;
  border:1px solid #352d2d;
  border-radius:9px;
  background:#111;
  cursor:pointer;
}

.mix-cover-choice:hover,
.mix-cover-choice:has(input:checked){
  border-color:#8c0000;
  background:#171010;
}

.mix-cover-choice input{
  width:auto!important;
  min-height:auto!important;
  margin-top:3px;
  accent-color:#8c0000;
}

.mix-cover-choice b,
.mix-cover-choice small{
  display:block;
}

.mix-cover-choice b{
  color:#fff;
  font-size:12px;
}

.mix-cover-choice small{
  margin-top:3px;
  color:#aaa3a3!important;
  font-size:10px!important;
  line-height:1.4;
}

.mix-cover-choice.recommended{
  border-color:#604020;
}

.mix-custom-cover{
  display:none;
  padding:8px 0 0;
}

.mix-cover-edit{
  display:grid;
  grid-template-columns:150px minmax(0,1fr);
  gap:14px;
  margin:12px 0;
  padding:12px;
  border:1px solid #3a3030;
  border-radius:10px;
  background:#0d0d0e;
}

.mix-cover-current img{
  width:100%;
  max-height:145px;
  object-fit:cover;
  border-radius:8px;
  margin-top:5px;
}

.mix-cover-current small{
  color:#c58b32!important;
  font-size:10px!important;
}

.mix-cover-edit-options{
  display:grid;
  gap:8px;
}

.mix-cover-edit-options label{
  display:flex!important;
  align-items:center;
  gap:7px;
  font-size:12px!important;
}

.mix-cover-edit-options input[type="radio"]{
  width:auto!important;
  min-height:auto!important;
  accent-color:#8c0000;
}

@media(max-width:700px){
  .mix-cover-selector,
  .mix-cover-edit{
    grid-template-columns:1fr;
  }

  .mix-cover-preview{
    max-width:320px;
  }
}


/* Mix MP3: indicador de subida por partes */
form[data-mix-upload="1"] .upload-card{
  position:relative;
}

form[data-mix-upload="1"] .chunk-note{
  margin-top:8px;
  padding:7px 9px;
  border:1px solid #4b302d;
  border-radius:7px;
  background:#110d0d;
  color:#b9aeaa;
  font-size:9px;
  line-height:1.45;
}


/* =========================================================
   SECTORURBANO 1.0 — GLOBAL PLAYER / ARTISTAS / DASHBOARD
   ========================================================= */
.global-player{
  z-index:9000!important;
}
.player-track-copy{
  min-width:0;
}
.player-open-link{
  display:block;
  margin-top:3px;
  color:#c58b32!important;
  font-size:7px;
  font-weight:900;
  text-decoration:none;
}
.player-open-link:hover{color:#fff!important}

.listing-card{position:relative}
.listing-play-btn{
  position:absolute;
  z-index:4;
  top:10px;
  right:10px;
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.16);
  border-radius:50%;
  background:#8c0000;
  color:#fff;
  cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.32);
}
.listing-play-btn:hover{background:#b51b1b;transform:scale(1.06)}
.artist-inline-link{color:#c58b32!important;text-decoration:none}
.artist-inline-link:hover{color:#fff!important}

/* Artista */
.artist-page{
  width:min(1180px,94%);
  margin:24px auto 110px;
}
.artist-hero{
  display:grid;
  grid-template-columns:190px minmax(0,1fr);
  gap:24px;
  align-items:center;
  padding:22px;
  border:1px solid #3a3030;
  border-radius:16px;
  background:
    radial-gradient(circle at 15% 25%,rgba(140,0,0,.18),transparent 32%),
    linear-gradient(145deg,#111,#090909);
}
.artist-avatar{
  width:190px;
  height:190px;
  overflow:hidden;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:linear-gradient(135deg,#321515,#8c0000);
  font-size:50px;
}
.artist-avatar img{width:100%;height:100%;object-fit:cover}
.artist-hero-copy>small{
  color:#c58b32;
  font-size:9px;
  font-weight:900;
  letter-spacing:1.6px;
}
.artist-hero-copy h1{margin:5px 0 8px;color:#fff;font-size:34px}
.artist-hero-copy p{max-width:760px;color:#aaa3a3;font-size:12px;line-height:1.6}
.artist-stats{display:flex;flex-wrap:wrap;gap:8px;margin-top:15px}
.artist-stats>div{
  min-width:90px;
  padding:9px 11px;
  border:1px solid #3b3030;
  border-radius:9px;
  background:#0b0b0c;
}
.artist-stats b,.artist-stats span{display:block}
.artist-stats b{color:#fff;font-size:17px}
.artist-stats span{margin-top:2px;color:#c58b32;font-size:7px;font-weight:900}

/* Dashboard PRO */
.dashboard-extra-metrics{grid-template-columns:repeat(4,minmax(0,1fr))!important;max-width:none!important}
.dashboard-pro-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin-top:14px;
}
.dashboard-chart-panel{min-height:260px}
.visit-mini-chart{
  height:190px;
  display:grid;
  grid-template-columns:repeat(7,1fr);
  align-items:end;
  gap:8px;
  padding-top:8px;
}
.visit-bar-wrap{
  height:100%;
  display:grid;
  grid-template-rows:22px 1fr 20px;
  align-items:end;
  text-align:center;
}
.visit-bar-value{color:#ddd;font-size:9px;font-weight:800}
.visit-bar-track{
  height:100%;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  overflow:hidden;
  border-radius:7px;
  background:#0a0909;
}
.visit-bar-track i{
  display:block;
  width:62%;
  min-height:4px;
  border-radius:6px 6px 2px 2px;
  background:linear-gradient(180deg,#c58b32,#8c0000);
}
.visit-bar-wrap small{padding-top:5px;color:#857c7c;font-size:7px}
.dashboard-rank-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:3px 10px;
  padding:9px 0;
  border-bottom:1px solid #252020;
}
.dashboard-rank-row b{color:#fff;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dashboard-rank-row span{grid-column:1;color:#918787;font-size:8px}
.dashboard-rank-row em{grid-column:2;grid-row:1/3;align-self:center;color:#c58b32;font-size:9px;font-style:normal;font-weight:800}
.dashboard-recent-row{
  display:grid;
  grid-template-columns:58px minmax(0,1fr) auto;
  gap:8px;
  align-items:center;
  padding:9px 0;
  border-bottom:1px solid #252020;
}
.dashboard-recent-row span{
  padding:4px 6px;border-radius:5px;background:#271111;color:#c58b32;font-size:7px;font-weight:900;text-align:center
}
.dashboard-recent-row b{font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dashboard-recent-row small{color:#817777;font-size:7px}

@media(max-width:900px){
  .artist-hero{grid-template-columns:130px minmax(0,1fr)}
  .artist-avatar{width:130px;height:130px}
  .dashboard-extra-metrics{grid-template-columns:repeat(2,1fr)!important}
  .dashboard-pro-grid{grid-template-columns:1fr}
}
@media(max-width:600px){
  .artist-hero{grid-template-columns:1fr}
  .artist-avatar{width:130px;height:130px}
  .artist-hero-copy h1{font-size:26px}
  .dashboard-extra-metrics{grid-template-columns:1fr 1fr!important}
}


/* =========================================================
   TITULO + ARTISTA SEPARADOS — MP3 / MIXES / ÁLBUMES
   ========================================================= */
.track-title,
.listing-title,
.detail-track-title{
  display:block!important;
  color:#fff!important;
  font-weight:900!important;
}

.track-title{
  margin-bottom:4px!important;
  font-size:13px!important;
  line-height:1.25!important;
}

.track-artist{
  display:block!important;
  margin-top:0!important;
  color:#c58b32!important;
  font-size:10px!important;
  font-weight:700!important;
  line-height:1.3!important;
}

.listing-title{
  margin:4px 0 5px!important;
  color:#fff!important;
  font-size:14px!important;
  line-height:1.25!important;
}

.listing-title a{
  color:#fff!important;
  text-decoration:none!important;
}

.listing-artist{
  display:block!important;
  margin:0 0 7px!important;
  color:#c58b32!important;
  font-size:10px!important;
  font-weight:700!important;
  line-height:1.35!important;
}

.listing-artist a{
  color:#c58b32!important;
  text-decoration:none!important;
}

.listing-artist a:hover{
  color:#fff!important;
}

.detail-track-title{
  margin-bottom:7px!important;
}

.detail-track-artist{
  margin:0 0 12px!important;
  color:#c58b32!important;
  font-size:14px!important;
  font-weight:800!important;
}


/* =========================================================
   SIGUENOS EN REDES SOCIALES
   ========================================================= */
.social-follow{
  width:min(1180px,94%);
  margin:26px auto 95px;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);
  gap:18px;
  align-items:center;
  padding:18px;
  border:1px solid #3a3030;
  border-radius:14px;
  background:
    radial-gradient(circle at 10% 15%,rgba(140,0,0,.15),transparent 34%),
    linear-gradient(145deg,#101010,#090909);
}

.social-follow-head small{
  display:block;
  color:#c58b32!important;
  font-size:8px!important;
  font-weight:900;
  letter-spacing:1.5px;
}

.social-follow-head h2{
  margin:5px 0 6px;
  color:#fff!important;
  font-size:20px!important;
}

.social-follow-head p{
  margin:0;
  color:#aaa3a3!important;
  font-size:10px!important;
  line-height:1.5;
}

.social-follow-links{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}

.social-follow-links a{
  display:flex;
  align-items:center;
  gap:9px;
  min-height:42px;
  padding:9px 11px;
  border:1px solid #3b3030;
  border-radius:9px;
  background:#0c0c0d;
  color:#fff!important;
  text-decoration:none!important;
  font-size:10px!important;
  font-weight:800;
  transition:.2s ease;
}

.social-follow-links a span{
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  flex:0 0 28px;
  border-radius:7px;
  background:#8c0000;
  color:#fff;
  font-size:12px;
  font-weight:900;
}

.social-follow-links a:hover{
  border-color:#8c0000;
  background:#171010;
  transform:translateY(-1px);
}

.settings-grid-pro{
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(280px,.7fr);
  gap:16px;
  align-items:start;
}

.social-admin-form{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.social-admin-form button{
  grid-column:1/-1;
}

.admin-help-text{
  margin:0 0 14px;
  color:#968c8c;
  font-size:10px;
  line-height:1.5;
}

@media(max-width:800px){
  .social-follow{
    grid-template-columns:1fr;
    margin-bottom:105px;
  }

  .settings-grid-pro{
    grid-template-columns:1fr;
  }
}

@media(max-width:520px){
  .social-follow-links,
  .social-admin-form{
    grid-template-columns:1fr;
  }
}


/* =========================================================
   FILTRO DE TRACKLIST — título / artista
   ========================================================= */
.track-filter-box{
  margin:8px 0 10px;
  padding:10px;
  border:1px solid #3b3030;
  border-radius:10px;
  background:#0c0c0d;
}

.track-filter-search{
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 10px;
  border:1px solid #443432;
  border-radius:8px;
  background:#090909;
}

.track-filter-search>span{
  color:#c58b32;
  font-size:16px;
  font-weight:900;
}

.track-filter-search input{
  width:100%!important;
  min-height:42px!important;
  padding:9px 0!important;
  border:0!important;
  background:transparent!important;
  color:#fff!important;
  box-shadow:none!important;
  font-size:12px!important;
}

.track-filter-search input:focus{
  outline:0!important;
}

.track-filter-box:focus-within{
  border-color:#8c0000;
}

.track-filter-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  margin-top:8px;
}

.track-filter-btn{
  min-height:30px!important;
  padding:6px 9px!important;
  border:1px solid #453635!important;
  border-radius:7px!important;
  background:#151111!important;
  color:#c8c0c0!important;
  font-size:8px!important;
  font-weight:900!important;
  cursor:pointer;
}

.track-filter-btn.active,
.track-filter-btn:hover{
  border-color:#8c0000!important;
  background:#8c0000!important;
  color:#fff!important;
}

.track-selected-count{
  margin-left:auto;
  color:#c58b32;
  font-size:9px;
  font-weight:800;
}

.track-no-results{
  grid-column:1/-1;
  padding:20px;
  border:1px dashed #4a3835;
  border-radius:9px;
  color:#9e9494;
  text-align:center;
  font-size:10px;
}

@media(max-width:600px){
  .track-selected-count{
    width:100%;
    margin-left:0;
  }
}


/* Tracklist filtro FIX */
#trackNoResults{
  display:none;
}

#trackPicker .track-option{
  visibility:visible;
}

#trackSearchInput{
  position:relative;
  z-index:2;
}


/* =========================================================
   TRACKLIST FILTER — FIX REAL
   La regla original usa display:grid!important, por eso
   row.style.display='none' no podía ocultar las canciones.
   ========================================================= */
#trackPicker .track-option.track-filter-hidden{
  display:none!important;
}

#trackNoResults{
  display:none!important;
}

#trackNoResults.show{
  display:block!important;
}


/* REDES SOCIALES — FIX GLOBAL DE CSS + ICONOS */
.social-follow{
  box-sizing:border-box!important;
  width:min(1180px,94%)!important;
  max-width:1180px!important;
  margin:28px auto 110px!important;
  display:grid!important;
  grid-template-columns:minmax(260px,.9fr) minmax(0,1.4fr)!important;
  gap:18px!important;
  align-items:center!important;
  padding:20px!important;
  border:1px solid #3a3030!important;
  border-radius:15px!important;
  background:radial-gradient(circle at 12% 10%,rgba(140,0,0,.18),transparent 36%),linear-gradient(145deg,#111,#090909)!important;
  box-shadow:0 18px 45px rgba(0,0,0,.24)!important;
}

.social-follow *{box-sizing:border-box!important}
.social-follow-head small{display:block!important;margin:0 0 5px!important;color:#c58b32!important;font-size:9px!important;font-weight:900!important;letter-spacing:1.6px!important}
.social-follow-head h2{display:block!important;margin:0 0 7px!important;color:#fff!important;font-size:22px!important;line-height:1.15!important}
.social-follow-head p{display:block!important;margin:0!important;max-width:460px!important;color:#aaa3a3!important;font-size:11px!important;line-height:1.55!important}

.social-follow-links{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:9px!important;
}

.social-follow-links .social-btn{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  width:100%!important;
  min-height:48px!important;
  padding:10px 12px!important;
  border:1px solid #403434!important;
  border-radius:10px!important;
  background:#0c0c0d!important;
  color:#fff!important;
  text-decoration:none!important;
  font-size:11px!important;
  font-weight:800!important;
  line-height:1!important;
  transition:transform .18s ease,border-color .18s ease,background .18s ease!important;
}

.social-follow-links .social-btn:hover{
  transform:translateY(-2px)!important;
  border-color:#8c0000!important;
  background:#171010!important;
}

.social-follow-links .social-icon{
  width:31px!important;
  height:31px!important;
  flex:0 0 31px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:8px!important;
  background:#8c0000!important;
  color:#fff!important;
}

.social-follow-links .social-icon svg{width:18px!important;height:18px!important;display:block!important}
.social-instagram .social-icon{background:linear-gradient(135deg,#833ab4,#fd1d1d,#fcb045)!important}
.social-facebook .social-icon{background:#1877f2!important}
.social-youtube .social-icon{background:#ff0000!important}
.social-x .social-icon,.social-threads .social-icon,.social-tiktok .social-icon{background:#111!important;border:1px solid #3c3c3c!important}
.social-whatsapp .social-icon{background:#25d366!important}

@media(max-width:820px){
  .social-follow{grid-template-columns:1fr!important;width:min(94%,760px)!important}
}
@media(max-width:560px){
  .social-follow{margin-bottom:115px!important;padding:15px!important}
  .social-follow-links{grid-template-columns:1fr!important}
  .social-follow-head h2{font-size:19px!important}
}


/* =========================================================
   PORTADA — MÚSICA Y MIXES MÁS CLAROS / TÍTULOS VISIBLES
   ========================================================= */
.home-music-section{
  margin-top:22px!important;
}

.home-music-grid{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:14px!important;
}

.home-music-grid .music-card{
  min-width:0!important;
  overflow:hidden!important;
  border:1px solid #352d2d!important;
  border-radius:12px!important;
  background:linear-gradient(145deg,#101011,#090909)!important;
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease!important;
}

.home-music-grid .music-card:hover{
  transform:translateY(-3px)!important;
  border-color:#8c0000!important;
  box-shadow:0 14px 28px rgba(0,0,0,.28)!important;
}

.home-music-grid .cover{
  aspect-ratio:1/1!important;
  height:auto!important;
  min-height:0!important;
  overflow:hidden!important;
  position:relative!important;
}

.home-music-grid .cover img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
}

.home-music-grid .cover>button{
  width:42px!important;
  height:42px!important;
  border-radius:50%!important;
  font-size:13px!important;
  box-shadow:0 8px 22px rgba(0,0,0,.38)!important;
}

.home-music-grid .music-meta{
  min-height:116px!important;
  padding:11px 12px 12px!important;
  display:block!important;
}

.home-music-grid .home-track-title{
  display:block!important;
  min-height:38px!important;
  margin:0 0 5px!important;
  color:#fff!important;
  font-size:14px!important;
  font-weight:900!important;
  line-height:1.35!important;
  overflow:hidden!important;
  display:-webkit-box!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:2!important;
  white-space:normal!important;
  text-overflow:ellipsis!important;
}

.home-music-grid .home-track-title a{
  color:#fff!important;
  text-decoration:none!important;
}

.home-music-grid .home-track-title a:hover{
  color:#c58b32!important;
}

.home-music-grid .home-track-artist{
  display:block!important;
  margin:0 0 6px!important;
  overflow:hidden!important;
  color:#c58b32!important;
  font-size:11px!important;
  font-weight:800!important;
  line-height:1.3!important;
  white-space:nowrap!important;
  text-overflow:ellipsis!important;
}

.home-music-grid .music-meta>small{
  display:block!important;
  margin:0 0 7px!important;
  color:#8f8787!important;
  font-size:9px!important;
  line-height:1.3!important;
}

.home-music-grid .music-meta>div{
  display:flex!important;
  gap:10px!important;
  align-items:center!important;
  border-top:1px solid #292323!important;
  padding-top:7px!important;
}

.home-music-grid .music-meta em{
  color:#aaa3a3!important;
  font-size:9px!important;
  font-style:normal!important;
}

@media(max-width:1050px){
  .home-music-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
}

@media(max-width:760px){
  .home-music-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
  }

  .home-music-grid .home-track-title{
    min-height:36px!important;
    font-size:13px!important;
  }

  .home-music-grid .home-track-artist{
    font-size:10px!important;
  }
}

@media(max-width:430px){
  .home-music-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }

  .home-music-grid .music-meta{
    min-height:108px!important;
    padding:9px!important;
  }

  .home-music-grid .home-track-title{
    min-height:34px!important;
    font-size:12px!important;
  }
}


/* =========================================================
   ICONO DE DESCARGAS — CONTADORES
   ========================================================= */
.download-count-icon{
  width:13px!important;
  height:13px!important;
  display:inline-block!important;
  vertical-align:-2px!important;
  margin-right:2px!important;
  color:#c58b32!important;
  overflow:visible!important;
}

.music-meta em .download-count-icon,
.track-info small .download-count-icon{
  color:#c58b32!important;
}

@media(max-width:560px){
  .download-count-icon{
    width:12px!important;
    height:12px!important;
  }
}


/* =========================================================
   PORTADA — 5 COLUMNAS PARA MÚSICA NUEVA Y MIXES
   ========================================================= */
.home-music-grid{
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  gap:11px!important;
}
.home-music-grid .music-meta{min-height:108px!important;padding:9px 10px 10px!important}
.home-music-grid .home-track-title{min-height:34px!important;font-size:12px!important}
.home-music-grid .home-track-artist{font-size:9px!important}
.home-music-grid .music-meta>small,
.home-music-grid .music-meta em{font-size:8px!important}

@media(max-width:1180px){.home-music-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}}
@media(max-width:900px){.home-music-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@media(max-width:640px){.home-music-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}

/* =========================================================
   SELECTOR CUADROS / LISTA
   ========================================================= */
.catalog-view-switch{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  flex-wrap:wrap!important;
  gap:6px!important;
  margin:0 0 12px!important;
}
.catalog-view-switch>span{
  margin-right:3px!important;
  color:#8f8585!important;
  font-size:8px!important;
  font-weight:900!important;
  letter-spacing:1px!important;
}
.catalog-view-btn{
  display:inline-flex!important;
  align-items:center!important;
  gap:6px!important;
  min-height:32px!important;
  padding:6px 9px!important;
  border:1px solid #3e3434!important;
  border-radius:7px!important;
  background:#0d0d0e!important;
  color:#aaa3a3!important;
  font-size:8px!important;
  font-weight:900!important;
  cursor:pointer!important;
}
.catalog-view-btn svg{width:14px!important;height:14px!important;fill:currentColor!important}
.catalog-view-btn:hover,
.catalog-view-btn.active{border-color:#8c0000!important;background:#8c0000!important;color:#fff!important}

/* Vista lista */
.catalog-view-grid.catalog-list-view{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:8px!important;
}
.catalog-list-view .listing-card{
  display:grid!important;
  grid-template-columns:78px minmax(0,1fr) auto!important;
  gap:12px!important;
  align-items:center!important;
  min-height:86px!important;
  padding:7px!important;
  border-radius:10px!important;
}
.catalog-list-view .listing-cover{
  width:78px!important;
  height:78px!important;
  min-height:78px!important;
  aspect-ratio:1/1!important;
  border-radius:8px!important;
  overflow:hidden!important;
}
.catalog-list-view .listing-cover img{width:100%!important;height:100%!important;object-fit:cover!important}
.catalog-list-view .listing-meta{min-width:0!important;padding:2px 0!important}
.catalog-list-view .listing-meta>small{display:block!important;margin-bottom:3px!important;font-size:8px!important}
.catalog-list-view .listing-title{margin:0 0 4px!important;font-size:14px!important}
.catalog-list-view .listing-artist{margin-bottom:5px!important;font-size:10px!important}
.catalog-list-view .listing-stats{display:flex!important;gap:12px!important}
.catalog-list-view .listing-play-btn{
  position:static!important;
  grid-column:3!important;
  grid-row:1!important;
  width:38px!important;
  height:38px!important;
  margin-right:8px!important;
  align-self:center!important;
}

@media(max-width:700px){
  .catalog-view-switch{justify-content:flex-start!important}
  .catalog-list-view .listing-card{
    grid-template-columns:62px minmax(0,1fr) auto!important;
    gap:9px!important;
    min-height:70px!important;
  }
  .catalog-list-view .listing-cover{
    width:62px!important;height:62px!important;min-height:62px!important
  }
  .catalog-list-view .listing-title{font-size:12px!important}
  .catalog-list-view .listing-play-btn{width:34px!important;height:34px!important;margin-right:2px!important}
}

@media(max-width:430px){
  .catalog-list-view .listing-card{grid-template-columns:56px minmax(0,1fr)!important}
  .catalog-list-view .listing-cover{width:56px!important;height:56px!important;min-height:56px!important}
  .catalog-list-view .listing-play-btn{display:none!important}
  .catalog-list-view .listing-meta{grid-column:2!important}
}


/* =========================================================
   ADMIN — PAGINACIÓN DE CATÁLOGOS
   ========================================================= */
.admin-pagination{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex-wrap:wrap!important;
  gap:6px!important;
  margin:16px 0 6px!important;
  padding-top:13px!important;
  border-top:1px solid #282020!important;
}

.admin-pagination a{
  min-width:32px!important;
  height:32px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0 9px!important;
  border:1px solid #423434!important;
  border-radius:7px!important;
  background:#0c0c0d!important;
  color:#a99f9f!important;
  text-decoration:none!important;
  font-size:9px!important;
  font-weight:900!important;
}

.admin-pagination a:hover,
.admin-pagination a.active{
  border-color:#8c0000!important;
  background:#8c0000!important;
  color:#fff!important;
}

.admin-pagination .admin-page-arrow{
  min-width:auto!important;
}

.admin-pagination-info{
  margin:6px 0 0!important;
  color:#817777!important;
  text-align:center!important;
  font-size:8px!important;
  font-weight:700!important;
}

@media(max-width:600px){
  .admin-pagination{
    justify-content:flex-start!important;
  }
  .admin-pagination a{
    min-width:30px!important;
    height:30px!important;
    padding:0 7px!important;
  }
}


/* =========================================================
   REPRODUCTOR GLOBAL PRO — OCULTO HASTA REPRODUCIR
   ========================================================= */
#globalPlayer.global-player{
  left:50%!important;
  right:auto!important;
  bottom:18px!important;
  width:min(1120px,calc(100% - 32px))!important;
  height:auto!important;
  min-height:82px!important;
  grid-template-columns:minmax(230px,1.05fr) auto minmax(260px,1.6fr) 145px 34px!important;
  gap:15px!important;
  padding:11px 14px!important;
  border:1px solid rgba(197,139,50,.25)!important;
  border-radius:17px!important;
  background:
    linear-gradient(145deg,rgba(22,18,18,.985),rgba(8,8,9,.99))!important;
  box-shadow:
    0 22px 65px rgba(0,0,0,.48),
    0 0 0 1px rgba(255,255,255,.025) inset!important;
  backdrop-filter:blur(18px)!important;
  -webkit-backdrop-filter:blur(18px)!important;
  transform:translate(-50%,calc(100% + 45px))!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transition:
    transform .38s cubic-bezier(.2,.8,.2,1),
    opacity .28s ease,
    visibility .38s!important;
  z-index:9990!important;
}

#globalPlayer.global-player.player-visible{
  transform:translate(-50%,0)!important;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
}

#globalPlayer.global-player.player-hiding{
  pointer-events:none!important;
}

#globalPlayer .player-track{
  min-width:0!important;
  display:flex!important;
  align-items:center!important;
  gap:11px!important;
}

#globalPlayer .player-cover{
  width:58px!important;
  height:58px!important;
  flex:0 0 58px!important;
  border-radius:11px!important;
  overflow:hidden!important;
  display:grid!important;
  place-items:center!important;
  background:linear-gradient(135deg,#2f1717,#8c0000)!important;
  box-shadow:0 8px 20px rgba(0,0,0,.28)!important;
}

#globalPlayer .player-cover img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
}

#globalPlayer .player-cover-fallback{
  color:#fff!important;
  font-size:20px!important;
}

#globalPlayer .player-track-copy{
  min-width:0!important;
}

#globalPlayer .player-now-playing{
  display:block!important;
  margin-bottom:3px!important;
  color:#c58b32!important;
  font-size:7px!important;
  font-weight:900!important;
  letter-spacing:1.2px!important;
}

#globalPlayer #playerTitle{
  display:block!important;
  max-width:100%!important;
  overflow:hidden!important;
  color:#fff!important;
  font-size:12px!important;
  font-weight:900!important;
  line-height:1.3!important;
  white-space:nowrap!important;
  text-overflow:ellipsis!important;
}

#globalPlayer #playerArtist{
  display:block!important;
  margin-top:3px!important;
  overflow:hidden!important;
  color:#a99f9f!important;
  font-size:9px!important;
  white-space:nowrap!important;
  text-overflow:ellipsis!important;
}

#globalPlayer .player-open-link{
  display:inline-block!important;
  margin-top:4px!important;
  color:#c58b32!important;
  font-size:7px!important;
  font-weight:900!important;
  text-decoration:none!important;
}
#globalPlayer .player-open-link[hidden]{display:none!important}

#globalPlayer .player-controls{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
}

#globalPlayer .player-controls button{
  display:grid!important;
  place-items:center!important;
  border:0!important;
  cursor:pointer!important;
}

#globalPlayer .player-skip{
  width:32px!important;
  height:32px!important;
  border-radius:50%!important;
  background:transparent!important;
  color:#b9b0b0!important;
}
#globalPlayer .player-skip:hover{
  background:#1c1515!important;
  color:#fff!important;
}
#globalPlayer .player-skip svg{
  width:17px!important;
  height:17px!important;
  fill:currentColor!important;
}

#globalPlayer .main-play{
  width:46px!important;
  height:46px!important;
  border-radius:50%!important;
  background:linear-gradient(145deg,#a30a0a,#710000)!important;
  color:#fff!important;
  box-shadow:0 8px 22px rgba(140,0,0,.36)!important;
  transition:transform .18s ease,box-shadow .18s ease!important;
}
#globalPlayer .main-play:hover{
  transform:scale(1.06)!important;
  box-shadow:0 10px 28px rgba(140,0,0,.48)!important;
}
#globalPlayer .play-symbol{
  display:block!important;
  font-size:14px!important;
  line-height:1!important;
}

#globalPlayer .player-progress-wrap{
  min-width:0!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:10px!important;
}

#globalPlayer .progress{
  min-width:0!important;
}

#globalPlayer .progress input,
#globalPlayer .volume input{
  width:100%!important;
  accent-color:#8c0000!important;
  cursor:pointer!important;
}

#globalPlayer .time{
  display:flex!important;
  align-items:center!important;
  gap:3px!important;
  color:#918888!important;
  font-size:8px!important;
  white-space:nowrap!important;
}
#globalPlayer .time-separator{color:#514949!important}

#globalPlayer .volume{
  display:flex!important;
  align-items:center!important;
  gap:7px!important;
}
#globalPlayer .volume svg{
  width:17px!important;
  height:17px!important;
  flex:0 0 17px!important;
  color:#a9a0a0!important;
}

#globalPlayer .player-close{
  width:30px!important;
  height:30px!important;
  display:grid!important;
  place-items:center!important;
  align-self:start!important;
  border:1px solid #3d3434!important;
  border-radius:50%!important;
  background:#0d0d0e!important;
  color:#9e9595!important;
  font-size:18px!important;
  line-height:1!important;
  cursor:pointer!important;
}
#globalPlayer .player-close:hover{
  border-color:#8c0000!important;
  background:#8c0000!important;
  color:#fff!important;
}

@media(max-width:980px){
  #globalPlayer.global-player{
    grid-template-columns:minmax(210px,1fr) auto minmax(190px,1.1fr) 34px!important;
  }
  #globalPlayer .volume{display:none!important}
}

@media(max-width:720px){
  #globalPlayer.global-player{
    left:12px!important;
    right:12px!important;
    bottom:12px!important;
    width:auto!important;
    min-height:74px!important;
    grid-template-columns:minmax(0,1fr) auto 30px!important;
    gap:9px!important;
    padding:9px 10px!important;
    transform:translateY(calc(100% + 35px))!important;
  }

  #globalPlayer.global-player.player-visible{
    transform:translateY(0)!important;
  }

  #globalPlayer .player-cover{
    width:50px!important;
    height:50px!important;
    flex-basis:50px!important;
  }

  #globalPlayer .player-track{
    min-width:0!important;
  }

  #globalPlayer .player-controls{
    gap:4px!important;
  }

  #globalPlayer .player-skip{
    display:none!important;
  }

  #globalPlayer .main-play{
    width:42px!important;
    height:42px!important;
  }

  #globalPlayer .player-progress-wrap,
  #globalPlayer .volume{
    display:none!important;
  }

  #globalPlayer .player-close{
    width:28px!important;
    height:28px!important;
  }
}

@media(max-width:430px){
  #globalPlayer .player-now-playing,
  #globalPlayer .player-open-link{
    display:none!important;
  }

  #globalPlayer #playerTitle{
    font-size:11px!important;
  }

  #globalPlayer #playerArtist{
    font-size:8px!important;
  }
}


/* Álbum — tracklist masivo */
.album-bulk-track-card{
  border-color:#594225!important;
  background:linear-gradient(145deg,rgba(197,139,50,.07),rgba(140,0,0,.06)),#0d0d0e!important;
}
.album-track-bulk-summary{
  margin:12px 0!important;padding:12px!important;border:1px solid #453732!important;
  border-radius:10px!important;background:#0b0b0c!important;
}
.album-track-bulk-head{
  display:flex!important;align-items:center!important;justify-content:space-between!important;
  gap:12px!important;margin-bottom:9px!important;
}
.album-track-bulk-head small,.album-track-bulk-head b{display:block!important}
.album-track-bulk-head small{margin-bottom:3px!important;color:#c58b32!important;font-size:8px!important;font-weight:900!important;letter-spacing:1px!important}
.album-track-bulk-head b{color:#fff!important;font-size:12px!important}
.album-track-bulk-head>span{color:#9f9696!important;font-size:9px!important;font-weight:800!important}
.album-track-bulk-list{
  max-height:260px!important;overflow:auto!important;display:grid!important;gap:4px!important;padding-right:4px!important;
}
.album-track-bulk-item{
  min-width:0!important;display:grid!important;grid-template-columns:28px minmax(0,1fr) auto!important;
  gap:8px!important;align-items:center!important;padding:7px 8px!important;border:1px solid #292323!important;
  border-radius:7px!important;background:#0f0f10!important;
}
.album-track-bulk-item>span{
  width:24px!important;height:24px!important;display:grid!important;place-items:center!important;border-radius:6px!important;
  background:#281313!important;color:#c58b32!important;font-size:8px!important;font-weight:900!important;
}
.album-track-bulk-item>b{
  min-width:0!important;overflow:hidden!important;color:#ddd!important;font-size:9px!important;
  white-space:nowrap!important;text-overflow:ellipsis!important;
}
.album-track-bulk-item>small{color:#817979!important;font-size:8px!important;white-space:nowrap!important}


/* =========================================================
   MIX — COVER AUTOMÁTICO SEGÚN TÍTULO
   ========================================================= */
.mix-cover-choice-auto{
  border-color:#6b4b21!important;
  background:linear-gradient(145deg,rgba(197,139,50,.08),rgba(140,0,0,.08))!important;
}

.mix-auto-preview{
  position:relative!important;
  min-height:220px!important;
  padding:18px!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:flex-end!important;
  align-items:flex-start!important;
  overflow:hidden!important;
  background:
    linear-gradient(145deg,rgba(140,0,0,.95),rgba(14,14,15,.96) 58%,rgba(197,139,50,.35)),
    #0b0b0c!important;
}

.mix-auto-preview:before,
.mix-auto-preview:after{
  content:""!important;
  position:absolute!important;
  width:220px!important;
  height:28px!important;
  background:#c58b32!important;
  opacity:.65!important;
  transform:rotate(-28deg)!important;
}

.mix-auto-preview:before{
  top:28px!important;
  right:-70px!important;
}

.mix-auto-preview:after{
  top:76px!important;
  right:-40px!important;
  background:#8c0000!important;
}

.mix-auto-preview>*{
  position:relative!important;
  z-index:2!important;
}

.mix-auto-preview>small{
  margin-bottom:auto!important;
  padding:5px 7px!important;
  background:#8c0000!important;
  color:#fff!important;
  font-size:7px!important;
  font-weight:900!important;
  letter-spacing:1px!important;
}

.mix-auto-preview>span{
  margin-bottom:5px!important;
  color:#c58b32!important;
  font-size:8px!important;
  font-weight:900!important;
  letter-spacing:1.4px!important;
}

.mix-auto-preview>strong{
  display:-webkit-box!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:3!important;
  overflow:hidden!important;
  color:#fff!important;
  font-size:22px!important;
  line-height:1.02!important;
  font-weight:1000!important;
  text-transform:uppercase!important;
}

.mix-auto-preview>em{
  margin-top:8px!important;
  color:#d0c9c9!important;
  font-size:9px!important;
  font-style:normal!important;
  font-weight:800!important;
}

/* Mix auto-cover preview — tipografía editorial PRO */
.mix-auto-preview{
  text-align:center!important;
  align-items:center!important;
  justify-content:center!important;
}
.mix-auto-preview>small{
  margin:0 0 22px!important;
  padding:0!important;
  background:transparent!important;
  color:#aaa!important;
  font-size:7px!important;
  letter-spacing:3px!important;
}
.mix-auto-preview>span{
  margin:0 0 14px!important;
  font-size:8px!important;
  letter-spacing:3px!important;
}
.mix-auto-preview>strong{
  max-width:94%!important;
  font-size:24px!important;
  line-height:1.04!important;
  letter-spacing:.3px!important;
  text-align:center!important;
  text-shadow:0 4px 12px rgba(0,0,0,.55)!important;
}
.mix-auto-preview>em{
  margin-top:18px!important;
  padding-top:11px!important;
  border-top:2px solid #8c0000!important;
  font-size:8px!important;
  letter-spacing:1.5px!important;
  text-align:center!important;
}


/* =========================================================
   SECTORURBANO — CENTRO DE NOTIFICACIONES PRO
   ========================================================= */
.su-notif-bell{
  position:relative;
  width:38px;
  height:38px;
  flex:0 0 38px;
  display:grid;
  place-items:center;
  border:1px solid #413535;
  border-radius:10px;
  background:linear-gradient(145deg,#111,#090909);
  color:#d7cece;
  cursor:pointer;
  transition:.2s ease;
}
.su-notif-bell:hover,
.su-notif-bell[aria-expanded="true"]{
  color:#fff;
  border-color:#8c0000;
  background:#191010;
  box-shadow:0 0 0 3px rgba(140,0,0,.12);
}
.su-notif-bell svg{
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.su-notif-badge{
  position:absolute;
  top:-5px;
  right:-5px;
  min-width:18px;
  height:18px;
  padding:0 4px;
  display:grid;
  place-items:center;
  border:2px solid #050309;
  border-radius:10px;
  background:#8c0000;
  color:#fff;
  font-size:7px;
  font-weight:900;
}
.su-notif-bell-floating{
  position:fixed!important;
  top:16px;
  right:16px;
  z-index:10020;
}

.su-notif-panel{
  position:fixed;
  top:76px;
  right:18px;
  width:min(390px,calc(100vw - 24px));
  max-height:min(680px,calc(100vh - 95px));
  z-index:10030;
  overflow:hidden;
  border:1px solid #413333;
  border-radius:16px;
  background:
    radial-gradient(circle at 80% 0,rgba(140,0,0,.16),transparent 30%),
    linear-gradient(150deg,#111,#080809);
  box-shadow:0 26px 80px rgba(0,0,0,.58);
  opacity:0;
  visibility:hidden;
  transform:translateY(-10px) scale(.98);
  transform-origin:top right;
  transition:.22s ease;
}
.su-notif-panel.show{
  opacity:1;
  visibility:visible;
  transform:translateY(0) scale(1);
}
.su-notif-panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:17px 17px 12px;
}
.su-notif-panel-head small{
  display:block;
  margin-bottom:3px;
  color:#c58b32;
  font-size:7px;
  font-weight:900;
  letter-spacing:1.5px;
}
.su-notif-panel-head h3{
  margin:0;
  color:#fff;
  font-size:18px;
}
.su-notif-close{
  width:31px;
  height:31px;
  display:grid;
  place-items:center;
  border:1px solid #433737;
  border-radius:50%;
  background:#0c0c0d;
  color:#aaa;
  font-size:18px;
  cursor:pointer;
}
.su-notif-close:hover{background:#8c0000;color:#fff;border-color:#8c0000}
.su-notif-panel-sub{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:0 17px 11px;
  border-bottom:1px solid #292323;
}
.su-notif-panel-sub span{
  color:#857d7d;
  font-size:8px;
}
.su-notif-panel-sub button{
  border:0;
  background:transparent;
  color:#c58b32;
  font-size:7px;
  font-weight:900;
  cursor:pointer;
}
.su-notif-list{
  max-height:550px;
  overflow:auto;
  padding:8px;
}
.su-notif-item{
  position:relative;
  display:grid;
  grid-template-columns:58px minmax(0,1fr) 8px;
  gap:10px;
  align-items:center;
  min-height:72px;
  padding:8px;
  border:1px solid transparent;
  border-radius:11px;
  color:inherit;
  text-decoration:none;
  transition:.18s ease;
}
.su-notif-item:hover{
  border-color:#443434;
  background:#121010;
}
.su-notif-item.unread{
  background:linear-gradient(90deg,rgba(140,0,0,.12),rgba(197,139,50,.035));
}
.su-notif-thumb{
  position:relative;
  width:58px;
  height:58px;
  border-radius:9px;
  overflow:hidden;
  background:#171113;
}
.su-notif-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.su-notif-type-icon{
  position:absolute;
  right:3px;
  bottom:3px;
  width:21px;
  height:21px;
  display:grid;
  place-items:center;
  border:2px solid #0a0a0b;
  border-radius:6px;
  background:#8c0000;
  color:#fff;
}
.su-notif-type-icon svg{
  width:11px;
  height:11px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.su-notif-copy{min-width:0}
.su-notif-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
  margin-bottom:4px;
}
.su-notif-meta span{
  color:#c58b32;
  font-size:7px;
  font-weight:900;
  text-transform:uppercase;
}
.su-notif-meta time{
  color:#746d6d;
  font-size:7px;
}
.su-notif-copy b{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
  color:#f3eeee;
  font-size:10px;
  line-height:1.3;
}
.su-notif-copy small{
  display:block;
  margin-top:5px;
  color:#847b7b;
  font-size:7px;
}
.su-notif-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#8c0000;
  box-shadow:0 0 10px rgba(140,0,0,.6);
}
.su-notif-empty,
.su-notif-loading{
  min-height:190px;
  padding:30px 24px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#8f8686;
}
.su-notif-empty svg{
  width:28px;
  height:28px;
  margin-bottom:12px;
  fill:none;
  stroke:#c58b32;
  stroke-width:1.5;
}
.su-notif-empty b{color:#fff;font-size:12px;margin-bottom:5px}
.su-notif-empty span{font-size:8px;line-height:1.6}
.su-notif-loading span{
  width:22px;
  height:22px;
  border:2px solid #332929;
  border-top-color:#8c0000;
  border-radius:50%;
  animation:su-spin .8s linear infinite;
}
.su-notif-loading p{font-size:8px}
@keyframes su-spin{to{transform:rotate(360deg)}}

/* Toast de nueva publicación */
.su-notif-toast{
  position:fixed;
  right:20px;
  bottom:105px;
  z-index:10040;
  width:min(410px,calc(100vw - 28px));
  display:grid;
  grid-template-columns:92px minmax(0,1fr);
  gap:13px;
  padding:12px;
  border:1px solid #4b3935;
  border-radius:15px;
  background:
    radial-gradient(circle at 0 0,rgba(140,0,0,.2),transparent 42%),
    linear-gradient(145deg,#141112,#09090a);
  box-shadow:0 24px 70px rgba(0,0,0,.6);
  opacity:0;
  transform:translateX(28px) scale(.98);
  transition:.28s cubic-bezier(.2,.8,.2,1);
}
.su-notif-toast.show{opacity:1;transform:translateX(0) scale(1)}
.su-toast-close{
  position:absolute;
  top:8px;
  right:8px;
  width:25px;
  height:25px;
  border:0;
  border-radius:50%;
  background:#151112;
  color:#8f8686;
  cursor:pointer;
}
.su-toast-close:hover{background:#8c0000;color:#fff}
.su-toast-image{
  position:relative;
  width:92px;
  height:92px;
  border-radius:11px;
  overflow:hidden;
}
.su-toast-image img{width:100%;height:100%;object-fit:cover}
.su-toast-image span{
  position:absolute;
  right:5px;
  bottom:5px;
  width:27px;
  height:27px;
  display:grid;
  place-items:center;
  border:2px solid #0a0a0b;
  border-radius:7px;
  background:#8c0000;
  color:#fff;
}
.su-toast-image svg{
  width:14px;
  height:14px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
}
.su-toast-copy{
  min-width:0;
  align-self:center;
  padding-right:22px;
}
.su-toast-copy small{
  display:block;
  margin-bottom:4px;
  color:#c58b32;
  font-size:7px;
  font-weight:900;
  letter-spacing:1px;
}
.su-toast-copy b{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
  color:#fff;
  font-size:12px;
  line-height:1.3;
}
.su-toast-copy p{
  margin:5px 0 8px;
  color:#8f8686;
  font-size:8px;
}
.su-toast-copy a{
  color:#fff;
  text-decoration:none;
  font-size:8px;
  font-weight:900;
}
.su-toast-copy a span{color:#c58b32}

/* Prompt de permiso Push */
.push-prompt{
  position:fixed;
  left:22px;
  bottom:105px;
  z-index:10035;
  width:min(440px,calc(100vw - 28px));
  display:grid;
  grid-template-columns:48px minmax(0,1fr);
  gap:12px;
  padding:16px;
  overflow:hidden;
  border:1px solid #463535;
  border-radius:16px;
  background:linear-gradient(145deg,#121011,#09090a);
  box-shadow:0 24px 70px rgba(0,0,0,.55);
  opacity:0;
  transform:translateY(20px);
  transition:.28s ease;
}
.push-prompt.show{opacity:1;transform:translateY(0)}
.push-prompt-glow{
  position:absolute;
  width:180px;
  height:180px;
  left:-70px;
  top:-90px;
  border-radius:50%;
  background:rgba(140,0,0,.22);
  filter:blur(18px);
}
.push-prompt-icon{
  position:relative;
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:#8c0000;
  color:#fff;
  box-shadow:0 9px 24px rgba(140,0,0,.3);
}
.push-prompt-icon svg{
  width:21px;
  height:21px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
}
.push-prompt-copy{position:relative;min-width:0}
.push-prompt-copy small{
  display:block;
  color:#c58b32;
  font-size:7px;
  font-weight:900;
  letter-spacing:1px;
}
.push-prompt-copy b{
  display:block;
  margin:3px 0 4px;
  color:#fff;
  font-size:13px;
}
.push-prompt-copy span{
  display:block;
  color:#918888;
  font-size:8px;
  line-height:1.5;
}
.push-prompt-actions{
  grid-column:1/-1;
  display:flex;
  gap:7px;
  padding-left:60px;
}
.push-prompt-actions button{
  min-height:32px;
  padding:7px 11px;
  border-radius:8px;
  font-size:7px;
  font-weight:900;
  cursor:pointer;
}
.push-allow,.push-done{
  border:1px solid #8c0000;
  background:#8c0000;
  color:#fff;
}
.push-later{
  border:1px solid #3f3434;
  background:#0c0c0d;
  color:#a49b9b;
}
.push-prompt.success .push-prompt-icon{background:#286b42}

@media(max-width:820px){
  .su-notif-bell{
    width:36px;
    height:36px;
    flex-basis:36px;
  }
  .su-notif-panel{
    top:72px;
    right:10px;
  }
}
@media(max-width:560px){
  .su-notif-panel{
    top:auto;
    right:8px;
    left:8px;
    bottom:10px;
    width:auto;
    max-height:78vh;
    transform:translateY(18px) scale(.99);
    transform-origin:bottom center;
  }
  .su-notif-panel.show{transform:translateY(0) scale(1)}
  .su-notif-toast{
    right:10px;
    bottom:92px;
    grid-template-columns:72px minmax(0,1fr);
  }
  .su-toast-image{width:72px;height:72px}
  .push-prompt{
    left:10px;
    bottom:92px;
    grid-template-columns:42px minmax(0,1fr);
  }
  .push-prompt-icon{width:42px;height:42px}
  .push-prompt-actions{
    padding-left:54px;
    flex-wrap:wrap;
  }
}


/* =========================================================
   TOP MP3 — NUMERACIÓN BLANCA ENCIMA DEL COVER
   ========================================================= */
.top-item{
  overflow:visible!important;
}

.top-item .thumb{
  position:relative!important;
  overflow:hidden!important;
}

.top-item .rank{
  left:4px!important;
  top:4px!important;
  width:25px!important;
  height:25px!important;
  z-index:8!important;
  border:1px solid rgba(255,255,255,.65)!important;
  border-radius:7px!important;
  background:rgba(5,5,6,.82)!important;
  color:#fff!important;
  font-size:11px!important;
  font-weight:1000!important;
  line-height:1!important;
  box-shadow:0 3px 10px rgba(0,0,0,.55)!important;
  backdrop-filter:blur(4px)!important;
  -webkit-backdrop-filter:blur(4px)!important;
  pointer-events:none!important;
}

@media(max-width:560px){
  .top-item .rank{
    width:23px!important;
    height:23px!important;
    font-size:10px!important;
  }
}


/* =========================================================
   TOP MP3 — VISUAL PRO / MAYOR LEGIBILIDAD
   ========================================================= */
.top-grid{
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  gap:12px!important;
}

.top-item{
  position:relative!important;
  display:grid!important;
  grid-template-columns:72px minmax(0,1fr) 30px!important;
  min-height:88px!important;
  gap:10px!important;
  align-items:center!important;
  padding:8px 9px!important;
  overflow:visible!important;
  border:1px solid #493737!important;
  border-radius:12px!important;
  background:
    radial-gradient(circle at 0 0,rgba(140,0,0,.12),transparent 44%),
    linear-gradient(145deg,#100d0e,#080809)!important;
  box-shadow:0 7px 22px rgba(0,0,0,.20)!important;
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease!important;
}

.top-item:hover{
  transform:translateY(-2px)!important;
  border-color:#6c4a3e!important;
  box-shadow:0 12px 28px rgba(0,0,0,.32)!important;
}

.top-item .thumb{
  position:relative!important;
  width:72px!important;
  height:72px!important;
  min-width:72px!important;
  border-radius:9px!important;
  overflow:hidden!important;
  background:#171113!important;
  box-shadow:0 5px 15px rgba(0,0,0,.35)!important;
}

.top-item .thumb img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
}

.top-item .rank{
  position:absolute!important;
  left:5px!important;
  top:5px!important;
  width:25px!important;
  height:25px!important;
  z-index:8!important;
  display:grid!important;
  place-items:center!important;
  border:1px solid rgba(255,255,255,.82)!important;
  border-radius:7px!important;
  background:rgba(5,5,6,.84)!important;
  color:#fff!important;
  font-size:11px!important;
  font-weight:1000!important;
  line-height:1!important;
  box-shadow:0 4px 12px rgba(0,0,0,.55)!important;
  backdrop-filter:blur(4px)!important;
  -webkit-backdrop-filter:blur(4px)!important;
}

.top-item .track-info{
  min-width:0!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  align-self:stretch!important;
  padding:6px 0!important;
}

.top-item .home-track-title{
  display:block!important;
  margin:0 0 5px!important;
  min-width:0!important;
  font-size:11px!important;
  line-height:1.18!important;
  font-weight:950!important;
}

.top-item .home-track-title .content-link{
  display:-webkit-box!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:2!important;
  overflow:hidden!important;
  color:#fff!important;
  text-decoration:none!important;
}

.top-item .home-track-title .content-link:hover{
  color:#c58b32!important;
}

.top-item .home-track-artist{
  display:block!important;
  min-width:0!important;
  margin-bottom:auto!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  color:#aaa1a1!important;
  font-size:8px!important;
  font-weight:700!important;
}

.top-item .track-info small{
  display:flex!important;
  align-items:center!important;
  gap:4px!important;
  margin-top:7px!important;
  color:#776f6f!important;
  font-size:7px!important;
  line-height:1!important;
  white-space:nowrap!important;
}

.top-item .download-count-icon{
  width:10px!important;
  height:10px!important;
}

.top-item .round-btn{
  width:29px!important;
  height:29px!important;
  min-width:29px!important;
  display:grid!important;
  place-items:center!important;
  padding:0!important;
  border:1px solid #8c0000!important;
  border-radius:50%!important;
  background:#8c0000!important;
  color:#fff!important;
  font-size:9px!important;
  box-shadow:0 5px 14px rgba(140,0,0,.25)!important;
  cursor:pointer!important;
  transition:.18s ease!important;
}

.top-item .round-btn:hover{
  transform:scale(1.08)!important;
  background:#a50000!important;
  border-color:#a50000!important;
}

/* En pantallas donde 5 tarjetas quedarían demasiado apretadas,
   se prioriza legibilidad antes que forzar las columnas. */
@media(max-width:1180px){
  .top-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
}

@media(max-width:760px){
  .top-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

@media(max-width:500px){
  .top-grid{
    grid-template-columns:1fr!important;
  }
  .top-item{
    grid-template-columns:78px minmax(0,1fr) 32px!important;
    min-height:94px!important;
  }
  .top-item .thumb{
    width:78px!important;
    height:78px!important;
  }
  .top-item .home-track-title{
    font-size:12px!important;
  }
  .top-item .home-track-artist{
    font-size:9px!important;
  }
}


/* =========================================================
   ADMIN — CONTROL EDITORIAL DE NOTIFICACIONES
   ========================================================= */
.publish-notification-box{
  display:grid!important;
  gap:9px!important;
  margin:4px 0!important;
  padding:12px!important;
  border:1px solid #4a3930!important;
  border-radius:11px!important;
  background:linear-gradient(145deg,rgba(197,139,50,.055),rgba(140,0,0,.065)),#09090a!important;
}
.publish-notification-head{
  display:flex!important;
  align-items:center!important;
  gap:9px!important;
  padding-bottom:7px!important;
  border-bottom:1px solid #2c2521!important;
}
.publish-notification-head>span{
  width:32px!important;
  height:32px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:8px!important;
  background:#8c0000!important;
  color:#fff!important;
}
.publish-notification-head small,
.publish-notification-head b{display:block!important}
.publish-notification-head small{
  color:#c58b32!important;
  font-size:7px!important;
  font-weight:900!important;
  letter-spacing:1.2px!important;
}
.publish-notification-head b{
  margin-top:2px!important;
  color:#fff!important;
  font-size:10px!important;
}
.publish-notification-note{
  color:#7e7676!important;
  font-size:7px!important;
  line-height:1.55!important;
}

.notification-admin-metrics{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,240px))!important;
  gap:10px!important;
  margin-bottom:14px!important;
}
.notification-admin-metric{
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  padding:14px!important;
  border:1px solid #443433!important;
  border-radius:11px!important;
  background:linear-gradient(145deg,#100d0e,#080809)!important;
}
.notification-admin-metric>span{
  width:40px!important;
  height:40px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:10px!important;
  background:#281313!important;
  font-size:18px!important;
}
.notification-admin-metric small,
.notification-admin-metric b{display:block!important}
.notification-admin-metric small{
  color:#887f7f!important;
  font-size:7px!important;
  font-weight:900!important;
}
.notification-admin-metric b{
  margin-top:3px!important;
  color:#fff!important;
  font-size:20px!important;
}
.notification-admin-help{
  color:#8e8585!important;
  font-size:8px!important;
  line-height:1.6!important;
}
.notification-admin-tip,
.notification-status-card{
  margin-top:13px!important;
  padding:11px!important;
  border:1px solid #302929!important;
  border-radius:9px!important;
  background:#0a0a0b!important;
}
.notification-admin-tip b,
.notification-admin-tip span{display:block!important}
.notification-admin-tip b{
  color:#c58b32!important;
  font-size:8px!important;
}
.notification-admin-tip span{
  margin-top:4px!important;
  color:#827a7a!important;
  font-size:7px!important;
  line-height:1.55!important;
}
.notification-status-card strong{
  display:block!important;
  color:#fff!important;
  font-size:34px!important;
}
.notification-status-card>span{
  display:block!important;
  color:#c58b32!important;
  font-size:8px!important;
  font-weight:900!important;
}
.notification-status-card p{
  color:#827a7a!important;
  font-size:8px!important;
  line-height:1.6!important;
}
.notification-history-panel{margin-top:16px!important}
.notification-admin-list{display:grid!important}
.notification-admin-row{
  display:grid!important;
  grid-template-columns:52px minmax(0,1fr) auto!important;
  gap:10px!important;
  align-items:center!important;
  padding:9px 0!important;
  border-bottom:1px solid #211c1c!important;
}
.notification-admin-thumb{
  width:52px!important;
  height:52px!important;
  display:grid!important;
  place-items:center!important;
  overflow:hidden!important;
  border-radius:8px!important;
  background:#241313!important;
}
.notification-admin-thumb img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
}
.notification-admin-copy{min-width:0!important}
.notification-admin-copy small,
.notification-admin-copy b,
.notification-admin-copy a{display:block!important}
.notification-admin-copy small{
  color:#c58b32!important;
  font-size:7px!important;
}
.notification-admin-copy b{
  margin:3px 0!important;
  overflow:hidden!important;
  color:#fff!important;
  font-size:9px!important;
  white-space:nowrap!important;
  text-overflow:ellipsis!important;
}
.notification-admin-copy a{
  color:#8b8282!important;
  font-size:7px!important;
  text-decoration:none!important;
}
.notification-history-empty{
  padding:22px!important;
  color:#817979!important;
  text-align:center!important;
  font-size:8px!important;
}
#manualNotificationSubmit:disabled{
  opacity:.45!important;
  cursor:not-allowed!important;
}

.su-notif-panel-actions{
  display:flex;
  align-items:center;
  gap:8px;
}
.su-notif-panel-actions button{
  border:0;
  background:transparent;
  font-size:7px;
  font-weight:900;
  cursor:pointer;
}
#suNotifDisablePush{color:#9b8585}
#suNotifDisablePush:hover{color:#fff}

@media(max-width:700px){
  .notification-admin-metrics{grid-template-columns:1fr!important}
  .notification-admin-row{grid-template-columns:46px minmax(0,1fr)!important}
  .notification-admin-row form{grid-column:1/-1!important;justify-self:end!important}
  .su-notif-panel-sub{align-items:flex-start}
  .su-notif-panel-actions{flex-direction:column;align-items:flex-end}
}


/* =========================================================
   FIX MÓVIL — BUSCADOR DEL HEADER SIN DESBORDAMIENTO
   ========================================================= */

/* El header tenía width:100% + padding y podía superar el ancho real
   de la pantalla cuando box-sizing quedaba en content-box. */
.topbar,
.topbar *,
.adminbar,
.adminbar *{
  box-sizing:border-box!important;
}

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

  .site{
    width:100%!important;
    max-width:100%!important;
    overflow-x:hidden!important;
  }

  .topbar{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    padding-left:12px!important;
    padding-right:12px!important;
    display:flex!important;
    flex-wrap:wrap!important;
    align-items:center!important;
    column-gap:8px!important;
    row-gap:0!important;
  }

  .topbar .logo{
    min-width:0!important;
    max-width:calc(100% - 92px)!important;
  }

  .topbar .brand-image-logo img{
    max-width:100%!important;
    height:auto!important;
  }

  .topbar .mobile-menu-btn,
  .topbar .su-notif-bell{
    flex:0 0 auto!important;
  }

  .topbar .top-search,
  .topbar .top-search.live-search-form{
    order:10!important;
    flex:1 1 100%!important;
    flex-basis:100%!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:8px 0 0!important;
    padding:0!important;
    overflow:visible!important;
  }

  .topbar .top-search input{
    flex:1 1 auto!important;
    width:0!important;
    min-width:0!important;
    max-width:100%!important;
    padding-left:11px!important;
    padding-right:8px!important;
  }

  .topbar .top-search button{
    flex:0 0 42px!important;
    width:42px!important;
    min-width:42px!important;
    max-width:42px!important;
  }

  .topbar .top-search .live-search-panel{
    left:0!important;
    right:0!important;
    width:100%!important;
    max-width:100%!important;
    box-sizing:border-box!important;
  }
}

@media(max-width:420px){
  .topbar{
    padding-left:9px!important;
    padding-right:9px!important;
  }

  .topbar .top-search,
  .topbar .top-search.live-search-form{
    margin-top:7px!important;
  }
}


/* PRENSA — categorías */
.news-category-tabs,
.home-news-categories{
  display:flex!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  gap:7px!important;
}
.news-category-tabs{
  margin:0 0 16px!important;
  padding:9px!important;
  border:1px solid #3f3333!important;
  border-radius:11px!important;
  background:#0b0b0c!important;
}
.home-news-categories{margin:-2px 0 13px!important}
.news-category-tabs a,
.home-news-categories a{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:31px!important;
  padding:7px 11px!important;
  border:1px solid #403434!important;
  border-radius:8px!important;
  background:#0d0d0e!important;
  color:#b4abab!important;
  text-decoration:none!important;
  font-size:8px!important;
  font-weight:900!important;
}
.news-category-tabs a:hover,
.news-category-tabs a.active,
.home-news-categories a:hover{
  border-color:#8c0000!important;
  background:#8c0000!important;
  color:#fff!important;
}
.news-category-badge{
  display:inline-flex!important;
  width:max-content!important;
  margin-bottom:5px!important;
  padding:4px 6px!important;
  border:1px solid rgba(197,139,50,.28)!important;
  border-radius:5px!important;
  background:rgba(197,139,50,.08)!important;
  color:#c58b32!important;
  font-size:7px!important;
  font-weight:900!important;
  letter-spacing:.5px!important;
  text-transform:uppercase!important;
}
@media(max-width:560px){
  .news-category-tabs,
  .home-news-categories{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}


/* =========================================================
   SECTORURBANO — USUARIOS EN LÍNEA / FOOTER LIVE
   ========================================================= */
.su-online-strip{
  width:100%!important;
  margin:18px auto 0!important;
  padding:0 14px!important;
  box-sizing:border-box!important;
}

.su-online-inner{
  width:100%!important;
  max-width:1280px!important;
  min-height:72px!important;
  margin:0 auto!important;
  padding:13px 16px!important;
  box-sizing:border-box!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:16px!important;
  overflow:hidden!important;
  position:relative!important;
  border:1px solid #493936!important;
  border-radius:13px!important;
  background:
    radial-gradient(circle at 8% 50%,rgba(140,0,0,.18),transparent 28%),
    radial-gradient(circle at 92% 50%,rgba(197,139,50,.07),transparent 26%),
    linear-gradient(145deg,#111010,#080809)!important;
  box-shadow:0 10px 32px rgba(0,0,0,.22)!important;
}

.su-online-inner:after{
  content:""!important;
  position:absolute!important;
  left:0!important;
  top:0!important;
  bottom:0!important;
  width:3px!important;
  background:linear-gradient(#8c0000,#c58b32)!important;
}

.su-online-status{
  min-width:0!important;
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
}

.su-online-pulse{
  position:relative!important;
  width:38px!important;
  height:38px!important;
  flex:0 0 38px!important;
  display:grid!important;
  place-items:center!important;
  border:1px solid rgba(61,190,108,.24)!important;
  border-radius:50%!important;
  background:rgba(30,106,59,.08)!important;
}

.su-online-pulse:before,
.su-online-pulse:after{
  content:""!important;
  position:absolute!important;
  inset:8px!important;
  border:1px solid rgba(60,207,113,.34)!important;
  border-radius:50%!important;
  animation:su-online-wave 2.2s ease-out infinite!important;
}

.su-online-pulse:after{
  animation-delay:1.1s!important;
}

.su-online-pulse i{
  width:9px!important;
  height:9px!important;
  border-radius:50%!important;
  background:#39c66d!important;
  box-shadow:0 0 13px rgba(57,198,109,.75)!important;
}

@keyframes su-online-wave{
  0%{transform:scale(.55);opacity:.9}
  100%{transform:scale(1.7);opacity:0}
}

.su-online-copy{
  min-width:0!important;
}

.su-online-copy>small{
  display:block!important;
  margin-bottom:3px!important;
  color:#c58b32!important;
  font-size:7px!important;
  font-weight:900!important;
  letter-spacing:1.4px!important;
}

.su-online-copy>div{
  min-width:0!important;
  display:flex!important;
  align-items:baseline!important;
  gap:6px!important;
}

.su-online-copy strong{
  color:#fff!important;
  font-size:22px!important;
  line-height:1!important;
  font-weight:1000!important;
  font-variant-numeric:tabular-nums!important;
}

.su-online-copy span{
  color:#b3aaaa!important;
  font-size:9px!important;
  font-weight:700!important;
}

.su-online-side{
  flex:0 0 auto!important;
  display:flex!important;
  align-items:flex-end!important;
  flex-direction:column!important;
  gap:4px!important;
}

.su-online-live{
  display:inline-flex!important;
  align-items:center!important;
  gap:5px!important;
  padding:5px 7px!important;
  border:1px solid rgba(57,198,109,.20)!important;
  border-radius:6px!important;
  background:rgba(57,198,109,.055)!important;
  color:#6fda93!important;
  font-size:7px!important;
  font-weight:900!important;
  letter-spacing:.8px!important;
}

.su-online-live i{
  width:5px!important;
  height:5px!important;
  border-radius:50%!important;
  background:#39c66d!important;
}

.su-online-side small{
  color:#746d6d!important;
  font-size:7px!important;
}

.su-online-strip:not(.online-ready) .su-online-pulse{
  opacity:.45!important;
}

@media(max-width:600px){
  .su-online-strip{
    padding:0 9px!important;
    margin-top:13px!important;
  }

  .su-online-inner{
    min-height:68px!important;
    padding:11px 12px!important;
    gap:8px!important;
  }

  .su-online-pulse{
    width:34px!important;
    height:34px!important;
    flex-basis:34px!important;
  }

  .su-online-copy>div{
    display:block!important;
  }

  .su-online-copy strong{
    font-size:19px!important;
  }

  .su-online-copy span{
    display:block!important;
    margin-top:2px!important;
    font-size:8px!important;
  }

  .su-online-side small{
    display:none!important;
  }
}


/* =========================================================
   SECTORURBANO — LATERAL DERECHO PRO
   ========================================================= */

/* Portada: contenido a la izquierda, sidebar a la derecha */
.layout{
  grid-template-columns:minmax(0,1fr) 285px!important;
  gap:16px!important;
}

.layout > .main{
  grid-column:1!important;
  grid-row:1!important;
}

.layout > .sidebar{
  grid-column:2!important;
  grid-row:1!important;
}

/* Páginas secundarias: corrige el orden visual aunque el aside esté primero en HTML */
.secondary-layout{
  grid-template-columns:minmax(0,1fr) 270px!important;
}

.secondary-layout > .listing-page{
  grid-column:1!important;
  grid-row:1!important;
}

.secondary-layout > .secondary-right-sidebar{
  grid-column:2!important;
  grid-row:1!important;
  position:sticky!important;
  top:82px!important;
  padding-top:28px!important;
  align-self:start!important;
}

.sidebar-downloads{
  position:sticky!important;
  top:82px!important;
  align-self:start!important;
}

.sidebar-pro-stack{
  display:grid!important;
  gap:11px!important;
}

.sidebar-pro-panel{
  margin:0!important;
  padding:11px!important;
  overflow:hidden!important;
  border:1px solid #413332!important;
  border-radius:12px!important;
  background:
    radial-gradient(circle at 100% 0,rgba(140,0,0,.09),transparent 34%),
    linear-gradient(145deg,#0f0e0f,#080809)!important;
  box-shadow:0 8px 22px rgba(0,0,0,.16)!important;
}

.sidebar-pro-title{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  margin-bottom:9px!important;
  padding-bottom:8px!important;
  border-bottom:1px solid #292322!important;
}

.sidebar-pro-title>span{
  width:29px!important;
  height:29px!important;
  flex:0 0 29px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:8px!important;
  background:#261313!important;
  color:#c58b32!important;
  font-size:12px!important;
}

.sidebar-pro-title small,
.sidebar-pro-title b{
  display:block!important;
}

.sidebar-pro-title small{
  margin-bottom:2px!important;
  color:#817878!important;
  font-size:6px!important;
  font-weight:900!important;
  letter-spacing:1.1px!important;
}

.sidebar-pro-title b{
  color:#fff!important;
  font-size:9px!important;
  font-weight:950!important;
}

/* Descargados */
.sidebar-pro-panel .download-side-list{
  gap:5px!important;
}

.sidebar-pro-panel .download-side-row{
  grid-template-columns:20px 40px minmax(0,1fr)!important;
  gap:7px!important;
  padding:5px!important;
  border-color:#272222!important;
  background:#0a0a0b!important;
}

.sidebar-pro-panel .download-side-cover{
  width:40px!important;
  height:40px!important;
}

.sidebar-pro-panel .download-side-rank{
  width:20px!important;
  height:20px!important;
  background:#181314!important;
  border:1px solid #4b3735!important;
  color:#fff!important;
  font-size:7px!important;
}

.sidebar-pro-panel .download-side-copy b{font-size:8px!important}
.sidebar-pro-panel .download-side-copy small,
.sidebar-pro-panel .download-side-copy em{font-size:7px!important}

/* Tendencias */
.sidebar-trend-list{
  display:grid!important;
  gap:4px!important;
}

.sidebar-trend-row{
  display:grid!important;
  grid-template-columns:20px 38px minmax(0,1fr)!important;
  gap:7px!important;
  align-items:center!important;
  padding:5px!important;
  border-radius:8px!important;
  color:inherit!important;
  text-decoration:none!important;
  transition:.18s ease!important;
}

.sidebar-trend-row:hover{
  background:#151010!important;
}

.sidebar-trend-number{
  color:#fff!important;
  font-size:8px!important;
  font-weight:1000!important;
  text-align:center!important;
}

.sidebar-trend-cover{
  width:38px!important;
  height:38px!important;
  display:grid!important;
  place-items:center!important;
  overflow:hidden!important;
  border-radius:6px!important;
  background:#1a1112!important;
}

.sidebar-trend-cover img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
}

.sidebar-trend-copy{
  min-width:0!important;
}

.sidebar-trend-copy small,
.sidebar-trend-copy b,
.sidebar-trend-copy em{
  display:block!important;
  overflow:hidden!important;
  white-space:nowrap!important;
  text-overflow:ellipsis!important;
}

.sidebar-trend-copy small{
  color:#c58b32!important;
  font-size:6px!important;
  font-weight:900!important;
}

.sidebar-trend-copy b{
  margin:2px 0!important;
  color:#fff!important;
  font-size:8px!important;
}

.sidebar-trend-copy em{
  color:#817979!important;
  font-size:7px!important;
  font-style:normal!important;
}

/* Prensa */
.sidebar-news-list{
  display:grid!important;
  gap:7px!important;
}

.sidebar-news-row{
  display:grid!important;
  grid-template-columns:50px minmax(0,1fr)!important;
  gap:8px!important;
  color:inherit!important;
  text-decoration:none!important;
}

.sidebar-news-thumb{
  width:50px!important;
  height:48px!important;
  display:grid!important;
  place-items:center!important;
  overflow:hidden!important;
  border-radius:7px!important;
  background:#251213!important;
  color:#c58b32!important;
  font-size:7px!important;
  font-weight:900!important;
}

.sidebar-news-thumb img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
}

.sidebar-news-copy{
  min-width:0!important;
}

.sidebar-news-copy small,
.sidebar-news-copy b,
.sidebar-news-copy em{
  display:block!important;
}

.sidebar-news-copy small{
  color:#c58b32!important;
  font-size:6px!important;
  font-weight:900!important;
}

.sidebar-news-copy b{
  display:-webkit-box!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:2!important;
  overflow:hidden!important;
  margin:3px 0!important;
  color:#fff!important;
  font-size:8px!important;
  line-height:1.25!important;
}

.sidebar-news-copy em{
  color:#746d6d!important;
  font-size:6px!important;
  font-style:normal!important;
}

.sidebar-pro-more{
  display:block!important;
  margin-top:9px!important;
  padding-top:8px!important;
  border-top:1px solid #292322!important;
  color:#c58b32!important;
  font-size:7px!important;
  font-weight:900!important;
  text-align:right!important;
  text-decoration:none!important;
}

/* Mix recomendado */
.sidebar-featured-cover{
  position:relative!important;
  display:block!important;
  aspect-ratio:1/1!important;
  overflow:hidden!important;
  border-radius:9px!important;
  background:#1a1011!important;
  color:#fff!important;
  text-decoration:none!important;
}

.sidebar-featured-cover img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  transition:transform .25s ease!important;
}

.sidebar-featured-cover:hover img{
  transform:scale(1.035)!important;
}

.sidebar-featured-cover>span{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  width:40px!important;
  height:40px!important;
  display:grid!important;
  place-items:center!important;
  transform:translate(-50%,-50%)!important;
  border:1px solid rgba(255,255,255,.5)!important;
  border-radius:50%!important;
  background:rgba(140,0,0,.88)!important;
  color:#fff!important;
  font-size:12px!important;
  box-shadow:0 7px 20px rgba(0,0,0,.42)!important;
}

.sidebar-featured-copy{
  padding-top:8px!important;
}

.sidebar-featured-copy>small{
  color:#c58b32!important;
  font-size:7px!important;
  font-weight:800!important;
}

.sidebar-featured-copy>b{
  display:-webkit-box!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:2!important;
  overflow:hidden!important;
  margin:3px 0 7px!important;
  color:#fff!important;
  font-size:10px!important;
  line-height:1.25!important;
}

.sidebar-featured-copy>div{
  display:flex!important;
  gap:10px!important;
  margin-bottom:8px!important;
  color:#817979!important;
  font-size:7px!important;
}

.sidebar-featured-copy>a{
  display:flex!important;
  min-height:31px!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:7px!important;
  background:#8c0000!important;
  color:#fff!important;
  font-size:7px!important;
  font-weight:900!important;
  text-decoration:none!important;
}

/* Estadísticas */
.sidebar-stat-grid{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:6px!important;
}

.sidebar-stat-grid>div{
  padding:10px 7px!important;
  border:1px solid #292323!important;
  border-radius:8px!important;
  background:#0a0a0b!important;
}

.sidebar-stat-grid strong,
.sidebar-stat-grid span{
  display:block!important;
}

.sidebar-stat-grid strong{
  color:#fff!important;
  font-size:15px!important;
  font-weight:1000!important;
}

.sidebar-stat-grid span{
  margin-top:2px!important;
  color:#817979!important;
  font-size:7px!important;
}

.sidebar-online-stat strong{
  color:#57d982!important;
}

/* Redes */
.sidebar-social-grid{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:5px!important;
}

.sidebar-social-grid a{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:5px!important;
  padding:8px!important;
  border:1px solid #302828!important;
  border-radius:7px!important;
  background:#0a0a0b!important;
  color:#bdb4b4!important;
  text-decoration:none!important;
  transition:.18s ease!important;
}

.sidebar-social-grid a:hover{
  border-color:#8c0000!important;
  color:#fff!important;
  background:#160d0e!important;
}

.sidebar-social-grid b{
  overflow:hidden!important;
  font-size:7px!important;
  white-space:nowrap!important;
  text-overflow:ellipsis!important;
}

.sidebar-social-grid span{
  color:#c58b32!important;
  font-size:8px!important;
}

/* Publicidad */
.sidebar-ad-panel{
  padding:7px!important;
}

.sidebar-ad-link,
.sidebar-ad-placeholder{
  position:relative!important;
  width:100%!important;
  aspect-ratio:300/250!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
  border-radius:9px!important;
  color:#fff!important;
  text-decoration:none!important;
}

.sidebar-ad-link>small,
.sidebar-ad-placeholder>small{
  position:absolute!important;
  left:7px!important;
  top:7px!important;
  z-index:2!important;
  padding:3px 5px!important;
  border-radius:4px!important;
  background:rgba(0,0,0,.72)!important;
  color:#aaa!important;
  font-size:5px!important;
  letter-spacing:1px!important;
}

.sidebar-ad-link img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
}

.sidebar-ad-link>span{
  position:absolute!important;
  left:10px!important;
  right:10px!important;
  bottom:10px!important;
  padding:7px!important;
  border-radius:6px!important;
  background:#8c0000!important;
  color:#fff!important;
  font-size:7px!important;
  font-weight:900!important;
  text-align:center!important;
}

.sidebar-ad-placeholder{
  border:1px dashed #5b423c!important;
  background:
    radial-gradient(circle at 50% 20%,rgba(140,0,0,.16),transparent 34%),
    #0a090a!important;
}

.sidebar-ad-placeholder strong{
  color:#fff!important;
  font-size:17px!important;
}

.sidebar-ad-placeholder>span{
  margin-top:3px!important;
  color:#c58b32!important;
  font-size:9px!important;
  font-weight:900!important;
}

.sidebar-ad-placeholder em{
  margin-top:8px!important;
  color:#7f7777!important;
  font-size:7px!important;
  font-style:normal!important;
}

/* Responsive */
@media(max-width:1000px){
  .layout{
    grid-template-columns:minmax(0,1fr) 245px!important;
  }

  .secondary-layout{
    grid-template-columns:minmax(0,1fr) 235px!important;
  }
}

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

  .layout > .main{
    grid-column:1!important;
    grid-row:1!important;
  }

  .layout > .sidebar{
    grid-column:1!important;
    grid-row:2!important;
  }

  .sidebar-downloads{
    position:static!important;
  }

  .secondary-layout{
    display:grid!important;
    grid-template-columns:1fr!important;
  }

  .secondary-layout > .listing-page{
    grid-column:1!important;
    grid-row:1!important;
  }

  .secondary-layout > .secondary-right-sidebar{
    grid-column:1!important;
    grid-row:2!important;
    position:static!important;
    padding-top:16px!important;
  }

  .sidebar-pro-stack{
    grid-template-columns:1fr 1fr!important;
    align-items:start!important;
  }

  .sidebar-featured-mix,
  .sidebar-ad-panel{
    grid-row:auto!important;
  }
}

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

  .sidebar-featured-cover{
    aspect-ratio:16/11!important;
  }
}


/* =========================================================
   SECTORURBANO — FOOTER PRO / SIN SIDEBAR
   ========================================================= */
.layout,.secondary-layout{
  display:block!important;
}
.layout>.main,.secondary-layout>.listing-page{
  width:100%!important;
  max-width:none!important;
}
.layout>.sidebar,.secondary-layout>.secondary-right-sidebar{
  display:none!important;
}

/* Evita el antiguo bloque social duplicado */
.social-follow{display:none!important}

.footer-pro{
  width:min(1320px,calc(100% - 28px))!important;
  margin:34px auto 10px!important;
  padding:20px!important;
  border:1px solid #403231!important;
  border-radius:16px!important;
  background:radial-gradient(circle at 50% 0,rgba(140,0,0,.10),transparent 34%),linear-gradient(145deg,#100f10,#070708)!important;
  box-shadow:0 18px 45px rgba(0,0,0,.24)!important;
}
.footer-pro-grid{
  display:grid!important;
  grid-template-columns:1.15fr 1.15fr 1fr .9fr!important;
  gap:20px!important;
}
.footer-pro-grid>section{min-width:0!important}
.fp-head{padding-bottom:10px!important;margin-bottom:10px!important;border-bottom:1px solid #302727!important}
.fp-head small{display:block!important;color:#8d8181!important;font-size:10px!important;font-weight:900!important;letter-spacing:1.2px!important}
.fp-head h3{margin:4px 0 0!important;color:#fff!important;font-size:16px!important;line-height:1.2!important}

.fp-trends{display:grid!important;gap:7px!important}
.fp-trends>a{display:grid!important;grid-template-columns:22px 44px minmax(0,1fr)!important;gap:8px!important;align-items:center!important;padding:5px!important;border-radius:8px!important;color:inherit!important;text-decoration:none!important}
.fp-trends>a:hover{background:#171011!important}
.fp-trends>a>b{color:#fff!important;font-size:12px!important;text-align:center!important}
.fp-thumb{width:44px!important;height:44px!important;display:grid!important;place-items:center!important;overflow:hidden!important;border-radius:7px!important;background:#211314!important}
.fp-thumb img,.fp-news-img img,.fp-mix-cover img{width:100%!important;height:100%!important;object-fit:cover!important}
.fp-trends>a>span:last-child{min-width:0!important}
.fp-trends strong,.fp-trends small{display:block!important;overflow:hidden!important;white-space:nowrap!important;text-overflow:ellipsis!important}
.fp-trends strong{color:#fff!important;font-size:12px!important}
.fp-trends small{margin-top:3px!important;color:#938989!important;font-size:10px!important}

.fp-news{display:grid!important;gap:9px!important}
.fp-news>a{display:grid!important;grid-template-columns:58px minmax(0,1fr)!important;gap:9px!important;color:inherit!important;text-decoration:none!important}
.fp-news-img{width:58px!important;height:50px!important;display:grid!important;place-items:center!important;overflow:hidden!important;border-radius:7px!important;background:#211314!important;color:#c58b32!important;font-size:9px!important}
.fp-news a span:last-child{min-width:0!important}
.fp-news small{display:block!important;color:#c58b32!important;font-size:9px!important;font-weight:900!important}
.fp-news strong{display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:2!important;overflow:hidden!important;margin-top:3px!important;color:#fff!important;font-size:12px!important;line-height:1.25!important}
.fp-more{display:block!important;margin-top:12px!important;color:#c58b32!important;font-size:10px!important;font-weight:900!important;text-decoration:none!important}

.fp-mix-cover{position:relative!important;display:block!important;width:100%!important;aspect-ratio:16/11!important;overflow:hidden!important;border-radius:10px!important;background:#1c1112!important;color:#fff!important;text-decoration:none!important}
.fp-mix-cover i{position:absolute!important;left:50%!important;top:50%!important;width:44px!important;height:44px!important;display:grid!important;place-items:center!important;transform:translate(-50%,-50%)!important;border-radius:50%!important;background:rgba(140,0,0,.9)!important;font-style:normal!important}
.fp-mix-copy>small,.fp-mix-copy>strong{display:block!important}
.fp-mix-copy>small{margin-top:9px!important;color:#c58b32!important;font-size:10px!important}
.fp-mix-copy>strong{margin:4px 0 9px!important;color:#fff!important;font-size:14px!important;line-height:1.25!important}
.fp-mix-copy>a{display:flex!important;min-height:36px!important;align-items:center!important;justify-content:center!important;border-radius:8px!important;background:#8c0000!important;color:#fff!important;font-size:10px!important;font-weight:900!important;text-decoration:none!important}
.fp-empty{padding:18px!important;border:1px dashed #4b3835!important;border-radius:10px!important;text-align:center!important}
.fp-empty b,.fp-empty span{display:block!important}.fp-empty b{color:#fff!important;font-size:13px!important}.fp-empty span{margin-top:5px!important;color:#918686!important;font-size:10px!important}

.fp-stats{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important}
.fp-stats>div{padding:13px 10px!important;border:1px solid #302828!important;border-radius:9px!important;background:#0a0a0b!important}
.fp-stats strong,.fp-stats span{display:block!important}.fp-stats strong{color:#fff!important;font-size:20px!important}.fp-stats span{margin-top:3px!important;color:#938989!important;font-size:10px!important}
#footerOnlineCount{color:#52d77f!important}
.fp-about{margin:12px 0 0!important;color:#8e8585!important;font-size:11px!important;line-height:1.5!important}

.fp-social{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:18px!important;margin-top:20px!important;padding:16px 0!important;border-top:1px solid #302727!important;border-bottom:1px solid #302727!important}
.fp-social>div small{display:block!important;color:#8d8181!important;font-size:9px!important;font-weight:900!important;letter-spacing:1px!important}
.fp-social>div h3{margin:4px 0 0!important;color:#fff!important;font-size:15px!important}
.fp-social nav{display:flex!important;flex-wrap:wrap!important;justify-content:flex-end!important;gap:7px!important}
.fp-social nav a{display:flex!important;align-items:center!important;gap:7px!important;min-height:38px!important;padding:8px 11px!important;border:1px solid #3a3030!important;border-radius:9px!important;background:#0a0a0b!important;color:#ddd!important;text-decoration:none!important;font-size:10px!important;font-weight:800!important}
.fp-social nav a:hover{border-color:#8c0000!important;background:#170d0e!important;color:#fff!important}
.fp-social svg{width:19px!important;height:19px!important;flex:0 0 19px!important}

.fp-ad{margin-top:16px!important}
.fp-ad>a,.fp-ad-empty{position:relative!important;width:100%!important;min-height:110px!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:hidden!important;border:1px solid #3b3030!important;border-radius:11px!important;background:#09090a!important;text-decoration:none!important}
.fp-ad>a img{width:100%!important;max-height:180px!important;object-fit:cover!important}
.fp-ad>a>small,.fp-ad-empty>small{position:absolute!important;left:9px!important;top:8px!important;padding:3px 6px!important;border-radius:4px!important;background:rgba(0,0,0,.7)!important;color:#aaa!important;font-size:8px!important;letter-spacing:1px!important}
.fp-ad-empty{flex-direction:column!important;gap:4px!important}.fp-ad-empty strong{color:#fff!important;font-size:18px!important}.fp-ad-empty span{color:#8e8585!important;font-size:11px!important}

@media(max-width:1000px){
 .footer-pro-grid{grid-template-columns:1fr 1fr!important}
}
@media(max-width:650px){
 .footer-pro{width:calc(100% - 16px)!important;padding:14px!important;margin-top:24px!important}
 .footer-pro-grid{grid-template-columns:1fr!important;gap:24px!important}
 .fp-head h3{font-size:17px!important}
 .fp-trends strong,.fp-news strong{font-size:13px!important}
 .fp-social{display:block!important}
 .fp-social nav{justify-content:flex-start!important;margin-top:12px!important}
 .fp-social nav a{flex:1 1 calc(50% - 7px)!important;justify-content:center!important}
}


/* =========================================================
   SECTORURBANO — ANCHO GLOBAL 1100PX
   Desktop: máximo 1100px / Mobile: 100% adaptable
   ========================================================= */
@media (min-width: 761px){
  .container,
  .wrap,
  .site-container,
  .header-inner,
  .nav-inner,
  .main-container,
  .content-container,
  .footer-inner,
  .footer-pro,
  .su-online-inner{
    width:calc(100% - 28px)!important;
    max-width:1100px!important;
    margin-left:auto!important;
    margin-right:auto!important;
    box-sizing:border-box!important;
  }
}

@media (max-width:760px){
  .container,
  .wrap,
  .site-container,
  .header-inner,
  .nav-inner,
  .main-container,
  .content-container,
  .footer-inner,
  .footer-pro,
  .su-online-inner{
    max-width:100%!important;
    box-sizing:border-box!important;
  }

  .footer-pro{
    width:calc(100% - 16px)!important;
  }
}


/* =========================================================
   FIX REAL — ANCHO MAESTRO DEL SITIO 1100PX
   La estructura real del proyecto usa .site como wrapper.
   ========================================================= */
@media (min-width:761px){
  html,body{
    width:100%!important;
    overflow-x:hidden!important;
  }

  .site{
    width:calc(100% - 28px)!important;
    max-width:1100px!important;
    margin-left:auto!important;
    margin-right:auto!important;
    box-sizing:border-box!important;
  }

  .site > .topbar,
  .site > .layout,
  .site > .secondary-layout,
  .site > main,
  .site .listing-page,
  .site .search-page,
  .site .legal-page{
    width:100%!important;
    max-width:1100px!important;
    margin-left:auto!important;
    margin-right:auto!important;
    box-sizing:border-box!important;
  }

  .topbar,
  .layout,
  .secondary-layout{
    max-width:1100px!important;
  }

  .footer-pro,
  .su-online-inner{
    width:calc(100% - 28px)!important;
    max-width:1100px!important;
  }
}

@media (max-width:760px){
  .site{
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    box-sizing:border-box!important;
  }

  .site > .topbar,
  .site > .layout,
  .site > .secondary-layout,
  .site > main,
  .topbar,
  .layout,
  .secondary-layout{
    width:100%!important;
    max-width:100%!important;
    box-sizing:border-box!important;
  }
}


/* =========================================================
   PORTADA — 5 VIDEOS
   1 último video grande + 4 videos en lateral derecho
   ========================================================= */
@media(min-width:761px){
  .home-video-showcase .video-showcase-grid{
    display:grid!important;
    grid-template-columns:minmax(0,1.9fr) minmax(260px,1fr)!important;
    grid-template-rows:repeat(4,92px)!important;
    gap:9px!important;
    align-items:stretch!important;
  }

  .home-video-showcase .video-showcase-featured{
    grid-column:1!important;
    grid-row:1 / span 4!important;
    min-height:0!important;
  }

  .home-video-showcase .video-showcase-card:not(.video-showcase-featured){
    grid-column:2!important;
    min-height:0!important;
  }

  .home-video-showcase .video-showcase-card:nth-child(2){grid-row:1!important}
  .home-video-showcase .video-showcase-card:nth-child(3){grid-row:2!important}
  .home-video-showcase .video-showcase-card:nth-child(4){grid-row:3!important}
  .home-video-showcase .video-showcase-card:nth-child(5){grid-row:4!important}

  .home-video-showcase .video-showcase-featured .video-showcase-copy h3{
    font-size:19px!important;
    line-height:1.15!important;
  }

  .home-video-showcase .video-showcase-card:not(.video-showcase-featured) .video-showcase-copy{
    left:10px!important;
    right:42px!important;
    bottom:8px!important;
  }

  .home-video-showcase .video-showcase-card:not(.video-showcase-featured) .video-showcase-copy h3{
    font-size:11px!important;
    line-height:1.15!important;
    display:-webkit-box!important;
    -webkit-box-orient:vertical!important;
    -webkit-line-clamp:2!important;
    overflow:hidden!important;
  }

  .home-video-showcase .video-showcase-card:not(.video-showcase-featured) .video-showcase-copy p{
    display:none!important;
  }
}

/* Tablet y móvil: video grande arriba + cuatro videos en cuadrícula */
@media(max-width:760px){
  .home-video-showcase .video-showcase-grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-template-rows:220px repeat(2,125px)!important;
    gap:8px!important;
  }

  .home-video-showcase .video-showcase-featured{
    grid-column:1 / span 2!important;
    grid-row:1!important;
  }

  .home-video-showcase .video-showcase-card:not(.video-showcase-featured){
    grid-column:auto!important;
    grid-row:auto!important;
  }
}

@media(max-width:480px){
  .home-video-showcase .video-showcase-grid{
    grid-template-rows:205px repeat(2,112px)!important;
    gap:7px!important;
  }

  .home-video-showcase .video-showcase-card:not(.video-showcase-featured) .video-showcase-copy h3{
    font-size:10px!important;
    -webkit-line-clamp:2!important;
  }
}


/* =========================================================
   FIX CATÁLOGOS — CUADROS Y LISTA DENTRO DE 1100PX
   MP3 / MIXES / ÁLBUMES
   ========================================================= */

/* La página y todos sus hijos respetan el ancho disponible */
.listing-page,
.listing-page *,
.catalog-view-grid,
.catalog-view-grid *{
  box-sizing:border-box!important;
  min-width:0;
}

.listing-page{
  width:100%!important;
  max-width:100%!important;
  overflow:hidden!important;
}

/* VISTA CUADROS */
.catalog-view-grid:not(.catalog-list-view){
  width:100%!important;
  max-width:100%!important;
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  gap:10px!important;
}

.catalog-view-grid:not(.catalog-list-view) .listing-card{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  display:block!important;
  padding:8px!important;
  overflow:hidden!important;
}

.catalog-view-grid:not(.catalog-list-view) .listing-cover{
  width:100%!important;
  aspect-ratio:1/1!important;
  height:auto!important;
  max-width:100%!important;
  display:block!important;
  overflow:hidden!important;
}

.catalog-view-grid:not(.catalog-list-view) .listing-cover img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
}

.catalog-view-grid:not(.catalog-list-view) .listing-meta{
  width:100%!important;
  min-width:0!important;
  padding-top:7px!important;
}

.catalog-view-grid:not(.catalog-list-view) .listing-title,
.catalog-view-grid:not(.catalog-list-view) .listing-title a,
.catalog-view-grid:not(.catalog-list-view) .listing-artist{
  width:100%!important;
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

.catalog-view-grid:not(.catalog-list-view) .listing-title a{
  display:-webkit-box!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:2!important;
  white-space:normal!important;
}

.catalog-view-grid:not(.catalog-list-view) .listing-play-btn{
  position:absolute!important;
  right:12px!important;
  top:12px!important;
}

/* VISTA LISTA */
.catalog-view-grid.catalog-list-view{
  width:100%!important;
  max-width:100%!important;
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:8px!important;
  overflow:hidden!important;
}

.catalog-view-grid.catalog-list-view .listing-card{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  display:grid!important;
  grid-template-columns:72px minmax(0,1fr) 34px!important;
  gap:10px!important;
  align-items:center!important;
  padding:8px!important;
  overflow:hidden!important;
}

.catalog-view-grid.catalog-list-view .listing-cover{
  width:72px!important;
  height:72px!important;
  min-width:72px!important;
  max-width:72px!important;
  overflow:hidden!important;
}

.catalog-view-grid.catalog-list-view .listing-cover img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
}

.catalog-view-grid.catalog-list-view .listing-meta{
  min-width:0!important;
  width:100%!important;
  overflow:hidden!important;
}

.catalog-view-grid.catalog-list-view .listing-title,
.catalog-view-grid.catalog-list-view .listing-title a,
.catalog-view-grid.catalog-list-view .listing-artist,
.catalog-view-grid.catalog-list-view .listing-stats{
  min-width:0!important;
  max-width:100%!important;
}

.catalog-view-grid.catalog-list-view .listing-title a{
  display:block!important;
  overflow:hidden!important;
  white-space:nowrap!important;
  text-overflow:ellipsis!important;
}

.catalog-view-grid.catalog-list-view .listing-artist{
  overflow:hidden!important;
  white-space:nowrap!important;
  text-overflow:ellipsis!important;
}

.catalog-view-grid.catalog-list-view .listing-stats{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:7px!important;
}

.catalog-view-grid.catalog-list-view .listing-play-btn{
  position:static!important;
  width:32px!important;
  height:32px!important;
  min-width:32px!important;
}

/* Responsive */
@media(max-width:1000px){
  .catalog-view-grid:not(.catalog-list-view){
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
  }
}

@media(max-width:820px){
  .catalog-view-grid:not(.catalog-list-view){
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
}

@media(max-width:620px){
  .catalog-view-grid:not(.catalog-list-view){
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  .catalog-view-grid.catalog-list-view .listing-card{
    grid-template-columns:60px minmax(0,1fr) 32px!important;
  }

  .catalog-view-grid.catalog-list-view .listing-cover{
    width:60px!important;
    height:60px!important;
    min-width:60px!important;
    max-width:60px!important;
  }
}

@media(max-width:400px){
  .catalog-view-grid:not(.catalog-list-view){
    gap:8px!important;
  }

  .catalog-view-grid.catalog-list-view .listing-card{
    grid-template-columns:54px minmax(0,1fr) 30px!important;
    gap:8px!important;
  }

  .catalog-view-grid.catalog-list-view .listing-cover{
    width:54px!important;
    height:54px!important;
    min-width:54px!important;
    max-width:54px!important;
  }
}


/* =========================================================
   SECTORURBANO — MÁRGENES UNIFORMES DE CATÁLOGO
   MP3 / MIXES / ÁLBUMES
   Alinea portada, controles, cuadros, lista y paginación.
   ========================================================= */

:root{
  --su-catalog-gutter:18px;
}

/* El contenedor de cada sección conserva el ancho 1100px,
   pero ahora tiene respiración idéntica a derecha e izquierda. */
.listing-page{
  width:100%!important;
  max-width:1100px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  padding-left:var(--su-catalog-gutter)!important;
  padding-right:var(--su-catalog-gutter)!important;
  box-sizing:border-box!important;
}

/* Todos los bloques principales se alinean sobre la misma línea vertical. */
.listing-page > *,
.listing-page .catalog-view-grid,
.listing-page .listing-grid,
.listing-page .pagination,
.listing-page .pager,
.listing-page .view-switcher,
.listing-page .catalog-toolbar{
  max-width:100%!important;
  box-sizing:border-box!important;
}

/* No añadir margen adicional a cada tarjeta:
   el espacio exterior lo controla listing-page y el interior el grid. */
.catalog-view-grid,
.listing-grid{
  width:100%!important;
  margin-left:0!important;
  margin-right:0!important;
}

/* Portada/encabezado de la sección y catálogo comparten el mismo eje. */
.listing-page .listing-hero,
.listing-page .section-hero,
.listing-page .page-hero,
.listing-page .listing-header,
.listing-page .section-head,
.listing-page .listing-toolbar{
  width:100%!important;
  margin-left:0!important;
  margin-right:0!important;
}

/* En móvil mantenemos un margen visual cómodo sin desperdiciar pantalla. */
@media(max-width:760px){
  :root{
    --su-catalog-gutter:10px;
  }

  .listing-page{
    padding-left:var(--su-catalog-gutter)!important;
    padding-right:var(--su-catalog-gutter)!important;
  }
}

@media(max-width:400px){
  :root{
    --su-catalog-gutter:8px;
  }
}


/* =========================================================
   FIX VIDEOS — MISMO MARGEN QUE MP3 / MIXES / ÁLBUMES
   ========================================================= */
.listing-page .video-list-grid{
  width:100%!important;
  max-width:100%!important;
  margin-left:0!important;
  margin-right:0!important;
  box-sizing:border-box!important;
}

.listing-page .video-list-grid,
.listing-page .video-list-grid *{
  box-sizing:border-box!important;
  min-width:0;
}

.listing-page .video-card{
  width:100%!important;
  max-width:100%!important;
  overflow:hidden!important;
}

/* La portada, videos y paginación quedan sobre el mismo eje */
.listing-page .listing-hero,
.listing-page .video-list-grid,
.listing-page .pagination{
  margin-left:0!important;
  margin-right:0!important;
  max-width:100%!important;
}

/* Cuadrícula fluida para no empujar los márgenes */
@media(min-width:761px){
  .listing-page .video-list-grid{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:12px!important;
  }
}

@media(max-width:760px){
  .listing-page .video-list-grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
  }
}

@media(max-width:480px){
  .listing-page .video-list-grid{
    grid-template-columns:1fr!important;
  }
}


/* =========================================================
   FIX VIDEO INDIVIDUAL — MISMO MARGEN QUE LAS SECCIONES
   ========================================================= */
.video-detail,
.video-detail-pro{
  width:100%!important;
  max-width:1100px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  padding-left:18px!important;
  padding-right:18px!important;
  box-sizing:border-box!important;
}

.video-detail *,
.video-detail-pro *{
  box-sizing:border-box!important;
  min-width:0;
}

.video-detail-head,
.video-player-box,
.video-share-card,
.video-detail .related-section{
  width:100%!important;
  max-width:100%!important;
  margin-left:0!important;
  margin-right:0!important;
}

.video-player-box{
  overflow:hidden!important;
}

.video-player-box iframe,
.video-player-box video{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
}

.video-detail .related-grid{
  width:100%!important;
  max-width:100%!important;
  margin-left:0!important;
  margin-right:0!important;
}

@media(max-width:760px){
  .video-detail,
  .video-detail-pro{
    padding-left:10px!important;
    padding-right:10px!important;
  }
}

@media(max-width:400px){
  .video-detail,
  .video-detail-pro{
    padding-left:8px!important;
    padding-right:8px!important;
  }
}


/* =========================================================
   SECTORURBANO — MULTIARTISTA + TOP ARTISTAS
   ========================================================= */
.artist-multi-picker{margin-top:6px!important;padding:9px!important;border:1px solid #423434!important;border-radius:10px!important;background:#09090a!important}
.artist-multi-search{width:100%!important;margin:0 0 8px!important}
.artist-multi-options{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important;max-height:230px!important;overflow:auto!important;padding:2px!important}
.artist-multi-option{display:flex!important;align-items:center!important;gap:8px!important;padding:7px!important;border:1px solid #302828!important;border-radius:8px!important;background:#0d0d0e!important;color:#ddd!important;cursor:pointer!important}
.artist-multi-option:has(input:checked){border-color:#8c0000!important;background:#180d0e!important}
.artist-multi-avatar{width:30px!important;height:30px!important;flex:0 0 30px!important;display:grid!important;place-items:center!important;overflow:hidden!important;border-radius:50%!important;background:#261314!important}
.artist-multi-avatar img{width:100%!important;height:100%!important;object-fit:cover!important}
.artist-multi-help{display:block!important;margin-top:7px!important;color:#8d8484!important;font-size:8px!important}

.artist-admin-note{color:#8f8585!important;font-size:9px!important;line-height:1.5!important}
.artist-admin-row{display:grid!important;grid-template-columns:44px minmax(0,1fr) auto!important;gap:9px!important;align-items:center!important;padding:8px 0!important;border-bottom:1px solid #2b2424!important}
.artist-admin-mini{width:44px!important;height:44px!important;display:grid!important;place-items:center!important;overflow:hidden!important;border-radius:50%!important;background:#251313!important}
.artist-admin-mini img{width:100%!important;height:100%!important;object-fit:cover!important}
.artist-admin-copy b,.artist-admin-copy small{display:block!important}.artist-admin-copy b{color:#fff!important;font-size:11px!important}.artist-admin-copy small{color:#877e7e!important;font-size:8px!important}
.artist-top-form{display:flex!important;align-items:center!important;gap:6px!important}.artist-top-form label{font-size:8px!important;color:#ddd!important}.artist-top-form input[type=number]{width:52px!important;padding:7px!important}.artist-top-form button{padding:8px!important;font-size:7px!important}

.home-top-artists{margin-top:20px!important}
.top-artists-grid{display:grid!important;grid-template-columns:repeat(10,minmax(0,1fr))!important;gap:9px!important}
.top-artist-card{position:relative!important;min-width:0!important;padding:8px 5px 9px!important;border:1px solid #392f2f!important;border-radius:11px!important;background:linear-gradient(145deg,#100e0f,#080809)!important;color:inherit!important;text-align:center!important;text-decoration:none!important;transition:.2s ease!important}
.top-artist-card:hover{transform:translateY(-3px)!important;border-color:#8c0000!important}
.top-artist-rank{position:absolute!important;left:6px!important;top:6px!important;z-index:2!important;width:22px!important;height:22px!important;display:grid!important;place-items:center!important;border-radius:6px!important;background:rgba(0,0,0,.82)!important;border:1px solid rgba(255,255,255,.55)!important;color:#fff!important;font-size:8px!important;font-weight:900!important}
.top-artist-photo{width:72px!important;height:72px!important;margin:0 auto 7px!important;display:grid!important;place-items:center!important;overflow:hidden!important;border-radius:50%!important;background:#281414!important}
.top-artist-photo img{width:100%!important;height:100%!important;object-fit:cover!important}
.top-artist-card strong{display:block!important;overflow:hidden!important;color:#fff!important;font-size:10px!important;white-space:nowrap!important;text-overflow:ellipsis!important}
.top-artist-card small{display:block!important;margin-top:3px!important;color:#8d8484!important;font-size:8px!important}

.artists-search{display:flex!important;gap:7px!important;margin:15px 0!important}.artists-search input{flex:1!important;min-width:0!important;padding:11px!important;border:1px solid #443535!important;border-radius:9px!important;background:#09090a!important;color:#fff!important}.artists-search button{padding:0 16px!important;border:0!important;border-radius:9px!important;background:#8c0000!important;color:#fff!important;font-weight:900!important}
.artists-directory-grid{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:12px!important}
.artist-directory-card{padding:12px!important;border:1px solid #392f2f!important;border-radius:12px!important;background:#0c0c0d!important;color:inherit!important;text-align:center!important;text-decoration:none!important}
.artist-directory-photo{width:112px!important;height:112px!important;margin:0 auto 9px!important;display:grid!important;place-items:center!important;overflow:hidden!important;border-radius:50%!important;background:#281414!important}
.artist-directory-photo img{width:100%!important;height:100%!important;object-fit:cover!important}
.artist-directory-card strong{display:block!important;color:#fff!important;font-size:13px!important}.artist-directory-card small{display:block!important;margin-top:4px!important;color:#918787!important;font-size:9px!important}
.artist-separator{color:#777!important}

@media(max-width:1000px){
 .top-artists-grid{grid-template-columns:repeat(5,minmax(0,1fr))!important}
 .artists-directory-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}
}
@media(max-width:700px){
 .artist-multi-options{grid-template-columns:1fr!important}
 .top-artists-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
 .artists-directory-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
 .artist-admin-row{grid-template-columns:40px minmax(0,1fr)!important}.artist-top-form{grid-column:1/-1!important;justify-content:flex-end!important}
}
@media(max-width:480px){
 .top-artists-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 .artists-directory-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 .artist-directory-photo{width:90px!important;height:90px!important}
}


/* =========================================================
   FIX ARTISTAS — MISMOS MÁRGENES QUE LAS DEMÁS SECCIONES
   /artistas + /artista/slug
   ========================================================= */

/* Directorio de artistas */
.artists-listing-page,
.artist-page{
  width:100%!important;
  max-width:1100px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  padding-left:18px!important;
  padding-right:18px!important;
  box-sizing:border-box!important;
}

.artists-listing-page *,
.artist-page *{
  box-sizing:border-box!important;
  min-width:0;
}

/* Alinear encabezado, buscador, grid, contenido y paginación */
.artists-listing-page .listing-hero,
.artists-listing-page .artists-search,
.artists-listing-page .artists-directory-grid,
.artists-listing-page .pagination,
.artist-page .artist-hero,
.artist-page > .block,
.artist-page .listing-grid,
.artist-page .section-title{
  width:100%!important;
  max-width:100%!important;
  margin-left:0!important;
  margin-right:0!important;
}

/* Evitar cualquier desbordamiento */
.artists-directory-grid,
.artist-page .listing-grid{
  overflow:hidden!important;
}

/* Perfil individual: portada y bloques dentro del mismo eje */
.artist-page .artist-hero{
  overflow:hidden!important;
}

.artist-page .artist-avatar{
  flex:0 0 auto!important;
}

.artist-page .artist-hero-copy{
  min-width:0!important;
}

/* Responsive */
@media(max-width:760px){
  .artists-listing-page,
  .artist-page{
    padding-left:10px!important;
    padding-right:10px!important;
  }
}

@media(max-width:400px){
  .artists-listing-page,
  .artist-page{
    padding-left:8px!important;
    padding-right:8px!important;
  }
}


/* Admin artistas — edición */
.artist-admin-actions{
  display:flex!important;
  align-items:center!important;
  gap:7px!important;
  flex-wrap:wrap!important;
  justify-content:flex-end!important;
}
.artist-admin-actions .edit-btn{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:32px!important;
  padding:7px 10px!important;
}


/* =========================================================
   ADMIN — ASIGNAR MP3 A ARTISTAS
   ========================================================= */
.artist-song-manager{
  margin-top:16px!important;
}
.artist-song-manager-help{
  max-width:760px!important;
  color:#938989!important;
  font-size:9px!important;
  line-height:1.6!important;
}
.artist-song-search-form{
  display:grid!important;
  grid-template-columns:minmax(180px,.8fr) minmax(240px,1.4fr) auto!important;
  gap:10px!important;
  align-items:end!important;
  margin:14px 0!important;
  padding:12px!important;
  border:1px solid #392f2f!important;
  border-radius:11px!important;
  background:#09090a!important;
}
.artist-song-search-form label{
  color:#aaa!important;
  font-size:8px!important;
}
.artist-song-search-form input,
.artist-song-search-form select{
  width:100%!important;
  margin-top:5px!important;
  box-sizing:border-box!important;
}
.artist-song-selected-head{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
  margin:12px 0 8px!important;
}
.artist-song-selected-head small,
.artist-song-selected-head strong{
  display:block!important;
}
.artist-song-selected-head small{
  color:#c58b32!important;
  font-size:7px!important;
  font-weight:900!important;
  letter-spacing:1px!important;
}
.artist-song-selected-head strong{
  margin-top:2px!important;
  color:#fff!important;
  font-size:14px!important;
}
.artist-song-selected-head>span{
  color:#817979!important;
  font-size:8px!important;
}
.artist-song-results{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:7px!important;
  max-height:540px!important;
  overflow:auto!important;
  padding:3px!important;
}
.artist-song-result{
  display:grid!important;
  grid-template-columns:18px 46px minmax(0,1fr) auto!important;
  gap:8px!important;
  align-items:center!important;
  padding:7px!important;
  border:1px solid #302828!important;
  border-radius:9px!important;
  background:#0b0b0c!important;
  cursor:pointer!important;
}
.artist-song-result:hover{
  border-color:#5b3d37!important;
}
.artist-song-result:has(input:checked){
  border-color:#8c0000!important;
  background:#180d0e!important;
}
.artist-song-result.is-linked{
  opacity:.63!important;
  cursor:default!important;
}
.artist-song-cover{
  width:46px!important;
  height:46px!important;
  display:grid!important;
  place-items:center!important;
  overflow:hidden!important;
  border-radius:7px!important;
  background:#261314!important;
}
.artist-song-cover img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
}
.artist-song-copy{
  min-width:0!important;
}
.artist-song-copy strong,
.artist-song-copy small{
  display:block!important;
  overflow:hidden!important;
  white-space:nowrap!important;
  text-overflow:ellipsis!important;
}
.artist-song-copy strong{
  color:#fff!important;
  font-size:9px!important;
}
.artist-song-copy small{
  margin-top:3px!important;
  color:#827979!important;
  font-size:7px!important;
}
.artist-song-add,
.artist-song-linked{
  padding:5px 6px!important;
  border-radius:5px!important;
  font-size:6px!important;
  font-weight:900!important;
  white-space:nowrap!important;
}
.artist-song-add{
  color:#c58b32!important;
  background:rgba(197,139,50,.08)!important;
}
.artist-song-linked{
  color:#55cf7d!important;
  background:rgba(85,207,125,.07)!important;
}
.artist-song-manager-actions{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  flex-wrap:wrap!important;
  gap:9px!important;
  margin-top:11px!important;
}
.artist-song-manager-actions>button:first-child{
  border:1px solid #443434!important;
  border-radius:8px!important;
  background:#0a0a0b!important;
  color:#aaa!important;
  padding:9px!important;
  font-size:7px!important;
  font-weight:900!important;
}
.artist-song-manager-actions span{
  margin-right:auto!important;
  color:#928888!important;
  font-size:8px!important;
}
.artist-song-empty{
  padding:22px!important;
  border:1px dashed #443434!important;
  border-radius:10px!important;
  color:#8e8585!important;
  text-align:center!important;
  font-size:9px!important;
}

@media(max-width:800px){
  .artist-song-search-form{
    grid-template-columns:1fr!important;
  }
  .artist-song-results{
    grid-template-columns:1fr!important;
    max-height:none!important;
  }
}


/* =========================================================
   ADMIN — ASIGNAR CANCIONES A ARTISTAS
   TIPOGRAFÍA MÁS GRANDE Y LEGIBLE
   ========================================================= */
.artist-song-manager-help{
  font-size:13px!important;
  line-height:1.6!important;
}
.artist-song-search-form label{
  font-size:12px!important;
  font-weight:700!important;
}
.artist-song-search-form input,
.artist-song-search-form select{
  font-size:13px!important;
}
.artist-song-search-form .primary-admin-btn{
  font-size:11px!important;
}
.artist-song-selected-head small{
  font-size:10px!important;
}
.artist-song-selected-head strong{
  font-size:16px!important;
}
.artist-song-selected-head>span{
  font-size:11px!important;
}
.artist-song-copy strong{
  font-size:13px!important;
  line-height:1.25!important;
}
.artist-song-copy small{
  font-size:10px!important;
  line-height:1.3!important;
}
.artist-song-add,
.artist-song-linked{
  font-size:9px!important;
}
.artist-song-manager-actions>button:first-child,
.artist-song-manager-actions .primary-admin-btn{
  font-size:10px!important;
}
.artist-song-manager-actions span{
  font-size:11px!important;
}
.artist-song-empty{
  font-size:12px!important;
}


/* Admin Artistas — quitar asociaciones incorrectas */
.artist-song-remove{
  min-height:30px!important;
  padding:6px 9px!important;
  border:1px solid rgba(220,73,73,.48)!important;
  border-radius:6px!important;
  background:rgba(120,18,18,.12)!important;
  color:#ff8585!important;
  font-size:10px!important;
  font-weight:900!important;
  cursor:pointer!important;
  white-space:nowrap!important;
}
.artist-song-remove:hover{
  border-color:#b52828!important;
  background:#6f1111!important;
  color:#fff!important;
}
.artist-song-result.is-linked{
  opacity:1!important;
}
.artist-song-result.is-linked .artist-song-copy{
  opacity:.78!important;
}


/* Admin Artistas — eliminar de forma segura */
.artist-delete-form{
  margin:0!important;
}
.artist-delete-btn{
  min-height:32px!important;
  padding:7px 10px!important;
  border-radius:7px!important;
  font-size:8px!important;
  font-weight:900!important;
}


/* =========================================================
   COMENTARIOS PRO — NOTICIAS
   ========================================================= */
.news-comments-pro{
  width:100%!important;
  max-width:900px!important;
  margin:34px auto 0!important;
  padding:22px!important;
  border:1px solid #403434!important;
  border-radius:15px!important;
  background:linear-gradient(145deg,#0e0e0f,#080809)!important;
  box-sizing:border-box!important;
}
.comments-pro-head small{color:#c58b32!important;font-size:9px!important;font-weight:900!important;letter-spacing:1.2px!important}
.comments-pro-head h2{margin:4px 0!important;color:#fff!important;font-size:23px!important}
.comments-pro-head h2 span{color:#837979!important;font-size:14px!important}
.comments-pro-head p{margin:0 0 16px!important;color:#978d8d!important;font-size:12px!important}
.comment-alert{margin-bottom:12px!important;padding:10px 12px!important;border-radius:8px!important;font-size:11px!important}
.comment-alert.success{border:1px solid rgba(62,190,105,.3)!important;background:rgba(62,190,105,.08)!important;color:#75dd99!important}
.comment-alert.error{border:1px solid rgba(216,76,76,.3)!important;background:rgba(216,76,76,.08)!important;color:#ff9999!important}
.comment-form-pro{padding:14px!important;border:1px solid #302828!important;border-radius:11px!important;background:#0a0a0b!important}
.comment-hp{position:absolute!important;left:-99999px!important}
.comment-form-title{display:flex!important;align-items:center!important;gap:9px!important;margin-bottom:12px!important}
.comment-avatar-new,.comment-avatar{display:grid!important;place-items:center!important;flex:0 0 auto!important;width:38px!important;height:38px!important;border-radius:50%!important;background:#251314!important;border:1px solid #4a3434!important;color:#c58b32!important;font-size:15px!important;font-weight:900!important}
.comment-form-title small,.comment-form-title b{display:block!important}.comment-form-title small{color:#817777!important;font-size:8px!important;letter-spacing:1px!important}.comment-form-title b{margin-top:2px!important;color:#fff!important;font-size:13px!important}
#cancelCommentReply{margin-left:auto!important;border:0!important;background:transparent!important;color:#c58b32!important;font-size:9px!important;cursor:pointer!important}
.comment-form-grid{display:grid!important;grid-template-columns:220px minmax(0,1fr)!important;gap:10px!important}
.comment-form-grid label{color:#a99f9f!important;font-size:10px!important;font-weight:700!important}
.comment-form-grid input,.comment-form-grid textarea{width:100%!important;margin-top:5px!important;padding:10px!important;border:1px solid #403333!important;border-radius:8px!important;background:#070708!important;color:#fff!important;font-size:12px!important;box-sizing:border-box!important}
.comment-form-grid textarea{min-height:105px!important;resize:vertical!important}.comment-body-field{position:relative!important}.comment-body-field>small{position:absolute!important;right:8px!important;bottom:7px!important;color:#6f6868!important;font-size:8px!important}
.comment-form-footer{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;margin-top:10px!important}.comment-form-footer>small{color:#766e6e!important;font-size:9px!important}.comment-form-footer button{min-height:36px!important;padding:8px 13px!important;border:0!important;border-radius:8px!important;background:#8c0000!important;color:#fff!important;font-size:10px!important;font-weight:900!important;cursor:pointer!important}
.comments-list-pro{display:grid!important;gap:12px!important;margin-top:18px!important}
.comment-item-pro{display:grid!important;grid-template-columns:42px minmax(0,1fr)!important;gap:10px!important;padding:12px 0!important;border-top:1px solid #2c2525!important}
.comment-content{min-width:0!important}.comment-meta{display:flex!important;align-items:center!important;gap:8px!important;flex-wrap:wrap!important}.comment-meta strong{color:#fff!important;font-size:12px!important}.comment-meta span{color:#746d6d!important;font-size:9px!important}
.comment-content>p{margin:7px 0!important;color:#c7bdbd!important;font-size:12px!important;line-height:1.6!important}.comment-reply-btn{padding:0!important;border:0!important;background:transparent!important;color:#c58b32!important;font-size:8px!important;font-weight:900!important;cursor:pointer!important}
.comment-replies{margin-top:8px!important;padding-left:13px!important;border-left:2px solid #362727!important}.comment-reply{grid-template-columns:34px minmax(0,1fr)!important;padding:9px 0!important}.comment-reply .comment-avatar{width:32px!important;height:32px!important;font-size:11px!important}
.comments-empty-pro{padding:28px!important;text-align:center!important;border:1px dashed #423434!important;border-radius:10px!important}.comments-empty-pro span{display:block!important;font-size:24px!important}.comments-empty-pro b{display:block!important;margin-top:6px!important;color:#fff!important;font-size:13px!important}.comments-empty-pro p{margin:4px 0 0!important;color:#817878!important;font-size:10px!important}

/* Admin comentarios */
.admin-comment-badge{display:inline-grid!important;place-items:center!important;min-width:17px!important;height:17px!important;padding:0 4px!important;margin-left:3px!important;border-radius:9px!important;background:#8c0000!important;color:#fff!important;font-size:7px!important}
.comments-admin-summary{display:flex!important;align-items:center!important;gap:14px!important;padding:10px 0 14px!important}.comments-admin-summary>div{padding:9px 13px!important;border-radius:9px!important;background:#1b1011!important}.comments-admin-summary strong,.comments-admin-summary span{display:block!important}.comments-admin-summary strong{color:#fff!important;font-size:22px!important}.comments-admin-summary span{color:#c58b32!important;font-size:8px!important}.comments-admin-summary p{color:#8f8585!important;font-size:9px!important}
.comments-admin-list{display:grid!important;gap:8px!important}.comment-admin-row{display:grid!important;grid-template-columns:42px minmax(0,1fr) auto!important;gap:10px!important;align-items:start!important;padding:11px!important;border:1px solid #342b2b!important;border-radius:10px!important;background:#0a0a0b!important}.comment-admin-row.status-pending{border-color:#66502d!important}.comment-admin-avatar{width:42px!important;height:42px!important;display:grid!important;place-items:center!important;border-radius:50%!important;background:#251314!important;color:#c58b32!important;font-weight:900!important}.comment-admin-meta{display:flex!important;gap:7px!important;align-items:center!important;flex-wrap:wrap!important}.comment-admin-meta strong{color:#fff!important;font-size:11px!important}.comment-admin-meta small{color:#756d6d!important;font-size:8px!important}.comment-status{padding:3px 5px!important;border-radius:4px!important;background:#201718!important;color:#c58b32!important;font-size:7px!important}.comment-admin-copy p{margin:7px 0!important;color:#c2b8b8!important;font-size:10px!important;line-height:1.5!important}.comment-admin-copy>a{color:#c58b32!important;font-size:8px!important;text-decoration:none!important}.comment-admin-actions{display:flex!important;gap:5px!important;flex-wrap:wrap!important;justify-content:flex-end!important}.comment-admin-actions button{padding:7px!important;border-radius:6px!important;font-size:7px!important;font-weight:900!important}.comment-approve{border:1px solid #285b39!important;background:#102318!important;color:#6edc92!important}.comment-hide{border:1px solid #5f502d!important;background:#241d0e!important;color:#d3b65b!important}.comment-admin-empty{padding:25px!important;text-align:center!important;color:#817878!important}

@media(max-width:700px){
 .news-comments-pro{padding:14px!important}.comment-form-grid{grid-template-columns:1fr!important}.comment-form-footer{align-items:flex-start!important;flex-direction:column!important}.comment-form-footer button{width:100%!important}.comment-admin-row{grid-template-columns:36px minmax(0,1fr)!important}.comment-admin-actions{grid-column:1/-1!important;justify-content:flex-end!important}
}


/* ADMIN — SELECTOR DE ARTISTAS COMPACTO + BUSCADOR FIX */
.artist-multi-picker{padding:8px!important;max-width:100%!important}
.artist-multi-search{height:38px!important;padding:8px 10px!important;margin:0 0 7px!important;font-size:12px!important}
.artist-multi-options{grid-template-columns:1fr!important;gap:4px!important;max-height:145px!important;overflow-y:auto!important;overflow-x:hidden!important;padding:1px 3px 1px 1px!important}
.artist-multi-option{min-height:36px!important;padding:5px 7px!important;gap:7px!important;font-size:11px!important}
.artist-multi-avatar{width:26px!important;height:26px!important;flex-basis:26px!important}
.artist-multi-option input[type="checkbox"]{width:15px!important;height:15px!important;flex:0 0 15px!important}
.artist-multi-help{margin-top:6px!important;font-size:9px!important}
.artist-multi-no-results{padding:12px 7px!important;color:#9c9292!important;font-size:10px!important;text-align:center!important}
.artist-multi-option[hidden]{display:none!important}


/* =========================================================
   VIDEO ↔ MP3 RELACIONADO
   ========================================================= */
.video-song-linker{
  padding:11px!important;
  border:1px solid #403333!important;
  border-radius:10px!important;
  background:#09090a!important;
}
.video-song-linker-head{
  display:flex!important;
  align-items:center!important;
  gap:9px!important;
  margin-bottom:9px!important;
}
.video-song-linker-head>span{
  width:32px!important;
  height:32px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:8px!important;
  background:#251314!important;
  color:#c58b32!important;
}
.video-song-linker-head small,.video-song-linker-head b{display:block!important}
.video-song-linker-head small{color:#817777!important;font-size:8px!important;letter-spacing:1px!important}
.video-song-linker-head b{color:#fff!important;font-size:12px!important}
.video-song-search,.video-song-select{
  width:100%!important;
  box-sizing:border-box!important;
  font-size:12px!important;
}
.video-song-search{margin-bottom:7px!important}
.video-song-linker-help{display:block!important;margin-top:7px!important;color:#817878!important;font-size:9px!important;line-height:1.45!important}

.video-related-mp3{
  margin:16px 0!important;
  padding:14px!important;
  border:1px solid #443534!important;
  border-radius:13px!important;
  background:radial-gradient(circle at 100% 0,rgba(140,0,0,.10),transparent 34%),#0b0b0c!important;
}
.video-related-mp3-head{
  display:flex!important;
  align-items:center!important;
  gap:9px!important;
  margin-bottom:11px!important;
}
.video-related-mp3-head>span{
  width:35px!important;height:35px!important;display:grid!important;place-items:center!important;border-radius:9px!important;background:#281314!important;color:#c58b32!important;font-size:16px!important
}
.video-related-mp3-head small,.video-related-mp3-head b{display:block!important}
.video-related-mp3-head small{color:#c58b32!important;font-size:9px!important;font-weight:900!important;letter-spacing:1px!important}
.video-related-mp3-head b{margin-top:2px!important;color:#fff!important;font-size:13px!important}
.video-related-mp3-card{
  display:grid!important;
  grid-template-columns:82px minmax(0,1fr) auto!important;
  gap:12px!important;
  align-items:center!important;
  padding:10px!important;
  border:1px solid #302828!important;
  border-radius:10px!important;
  background:#080809!important;
}
.video-related-cover{
  width:82px!important;height:82px!important;display:grid!important;place-items:center!important;overflow:hidden!important;border-radius:9px!important;background:#251314!important;color:#fff!important;text-decoration:none!important
}
.video-related-cover img{width:100%!important;height:100%!important;object-fit:cover!important}
.video-related-copy{min-width:0!important}
.video-related-copy>small{display:block!important;color:#c58b32!important;font-size:11px!important;font-weight:800!important}
.video-related-copy>strong{display:block!important;margin:4px 0 8px!important;color:#fff!important;font-size:16px!important;line-height:1.25!important}
.video-related-stats{display:flex!important;gap:10px!important;color:#867c7c!important;font-size:10px!important}
.video-related-actions{display:grid!important;gap:7px!important;min-width:150px!important}
.video-related-actions a{display:flex!important;min-height:36px!important;align-items:center!important;justify-content:center!important;padding:8px 11px!important;border-radius:8px!important;color:#fff!important;font-size:9px!important;font-weight:900!important;text-decoration:none!important}
.video-related-listen{border:1px solid #443434!important;background:#131011!important}
.video-related-download{background:#8c0000!important}
.video-related-note{display:block!important;margin-top:8px!important;color:#756e6e!important;font-size:9px!important;text-align:right!important}

@media(max-width:620px){
  .video-related-mp3-card{
    grid-template-columns:68px minmax(0,1fr)!important;
  }
  .video-related-cover{width:68px!important;height:68px!important}
  .video-related-actions{grid-column:1/-1!important;grid-template-columns:1fr 1fr!important;min-width:0!important}
  .video-related-copy>strong{font-size:14px!important}
}

/* VIDEO MP3 LIVE SEARCH FIX */
.video-song-live-wrap{position:relative!important}.video-song-search{width:100%!important;height:40px!important;padding:9px 38px 9px 10px!important;box-sizing:border-box!important}.video-song-clear{position:absolute!important;right:8px!important;top:7px!important;z-index:4!important;width:26px!important;height:26px!important;border:0!important;border-radius:50%!important;background:#281515!important;color:#ddd!important;font-size:17px!important;cursor:pointer!important}.video-song-results{position:absolute!important;left:0!important;right:0!important;top:44px!important;z-index:80!important;max-height:320px!important;overflow:auto!important;padding:6px!important;border:1px solid #4a3838!important;border-radius:10px!important;background:#09090a!important;box-shadow:0 18px 45px rgba(0,0,0,.55)!important}.video-song-result{width:100%!important;display:grid!important;grid-template-columns:42px minmax(0,1fr) auto!important;gap:8px!important;align-items:center!important;padding:7px!important;border:0!important;border-bottom:1px solid #261f1f!important;background:transparent!important;color:inherit!important;text-align:left!important;cursor:pointer!important}.video-song-result:hover{background:#171010!important}.video-song-result[hidden]{display:none!important}.video-song-result-cover{width:42px!important;height:42px!important;display:grid!important;place-items:center!important;overflow:hidden!important;border-radius:7px!important;background:#251414!important}.video-song-result-cover img{width:100%!important;height:100%!important;object-fit:cover!important}.video-song-result-copy{min-width:0!important}.video-song-result-copy strong,.video-song-result-copy small{display:block!important;overflow:hidden!important;white-space:nowrap!important;text-overflow:ellipsis!important}.video-song-result-copy strong{color:#fff!important;font-size:12px!important}.video-song-result-copy small{margin-top:3px!important;color:#918787!important;font-size:10px!important}.video-song-result-add{color:#c58b32!important;font-size:8px!important;font-weight:900!important}.video-song-no-results{padding:15px!important;color:#9b9090!important;font-size:11px!important;text-align:center!important}.video-song-selected{margin-top:8px!important;padding:8px 10px!important;border:1px solid rgba(63,190,106,.22)!important;border-radius:8px!important;background:rgba(63,190,106,.05)!important}.video-song-selected span,.video-song-selected strong,.video-song-selected small{display:block!important}.video-song-selected span{color:#64cf88!important;font-size:8px!important;font-weight:900!important}.video-song-selected strong{margin-top:2px!important;color:#fff!important;font-size:11px!important}.video-song-selected small{margin-top:2px!important;color:#8f8585!important;font-size:9px!important}


/* =========================================================
   FIX LIVE SEARCH VIDEO MP3 — TITULOS COMPLETOS
   ========================================================= */
.video-song-result{
  grid-template-columns:42px minmax(0,1fr)!important;
  align-items:center!important;
}

.video-song-result-add{
  grid-column:2!important;
  justify-self:start!important;
  margin-top:3px!important;
}

.video-song-result-copy{
  min-width:0!important;
  width:100%!important;
}

.video-song-result-copy strong,
.video-song-result-copy small{
  display:block!important;
  width:100%!important;
  max-width:none!important;
  overflow:visible!important;
  white-space:normal!important;
  text-overflow:clip!important;
  word-break:break-word!important;
  line-height:1.35!important;
}

.video-song-result-copy strong{
  font-size:12px!important;
}

.video-song-result-copy small{
  font-size:10px!important;
}

.video-song-results{
  min-width:100%!important;
}

@media(max-width:700px){
  .video-song-result{
    grid-template-columns:38px minmax(0,1fr)!important;
  }
  .video-song-result-cover{
    width:38px!important;
    height:38px!important;
  }
}


/* =========================================================
   FIX DEFINITIVO — ANCHO RESULTADOS LIVE SEARCH VIDEO/MP3
   Evita que reglas globales de button/span del admin colapsen el título.
   ========================================================= */
.video-song-linker,
.video-song-live-wrap,
.video-song-results{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
}

.video-song-results{
  left:0!important;
  right:0!important;
}

.video-song-results .video-song-result{
  display:grid!important;
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  box-sizing:border-box!important;
  grid-template-columns:42px minmax(0,1fr)!important;
  grid-template-areas:
    "cover copy"
    "cover action"!important;
  column-gap:10px!important;
  row-gap:3px!important;
  justify-content:stretch!important;
  align-items:center!important;
}

.video-song-results .video-song-result[hidden]{
  display:none!important;
}

.video-song-results .video-song-result-cover{
  grid-area:cover!important;
  width:42px!important;
  min-width:42px!important;
  max-width:42px!important;
}

.video-song-results .video-song-result-copy{
  grid-area:copy!important;
  display:block!important;
  width:auto!important;
  min-width:0!important;
  max-width:none!important;
  flex:none!important;
}

.video-song-results .video-song-result-copy strong,
.video-song-results .video-song-result-copy small{
  display:block!important;
  width:auto!important;
  min-width:0!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  word-break:normal!important;
  overflow-wrap:anywhere!important;
}

.video-song-results .video-song-result-copy strong{
  font-size:12px!important;
  line-height:1.35!important;
}

.video-song-results .video-song-result-copy small{
  margin-top:3px!important;
  font-size:10px!important;
  line-height:1.3!important;
}

.video-song-results .video-song-result-add{
  grid-area:action!important;
  display:block!important;
  width:auto!important;
  min-width:0!important;
  max-width:none!important;
  justify-self:start!important;
  margin:0!important;
  padding:0!important;
}

@media(max-width:700px){
  .video-song-results .video-song-result{
    grid-template-columns:38px minmax(0,1fr)!important;
  }
  .video-song-results .video-song-result-cover{
    width:38px!important;
    min-width:38px!important;
    max-width:38px!important;
  }
}


/* FIX COVER EN LIVE SEARCH VIDEO ↔ MP3 */
.video-song-results .video-song-result-cover{
  grid-area:cover!important;
  width:42px!important;
  height:42px!important;
  min-width:42px!important;
  max-width:42px!important;
  display:grid!important;
  place-items:center!important;
  overflow:hidden!important;
  border-radius:7px!important;
  background:#1f1414!important;
  color:#c58b32!important;
}
.video-song-results .video-song-result-cover img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  opacity:1!important;
  visibility:visible!important;
}
@media(max-width:700px){
  .video-song-results .video-song-result-cover{
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
    max-width:38px!important;
  }
}


/* =========================================================
   CDs DE PANAMÁ — HOME + CATÁLOGO + ADMIN
   ========================================================= */
.home-cds-panama{margin-top:24px!important}
.home-cds-grid{
  display:grid!important;
  grid-template-columns:repeat(6,minmax(0,1fr))!important;
  gap:11px!important;
}
.home-cd-card{
  min-width:0!important;
  overflow:hidden!important;
  border:1px solid #342524!important;
  border-radius:10px!important;
  background:linear-gradient(145deg,#0e0d0d,#080707)!important;
}
.home-cd-cover{
  position:relative!important;
  display:block!important;
  aspect-ratio:1/1!important;
  overflow:hidden!important;
  background:#111!important;
}
.home-cd-cover img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  display:block!important;
  transition:transform .25s ease!important;
}
.home-cd-card:hover .home-cd-cover img{transform:scale(1.035)!important}
.home-cd-cover>span{
  position:absolute!important;
  right:6px!important;
  top:6px!important;
  padding:3px 5px!important;
  border-radius:5px!important;
  background:#8c0000!important;
  color:#fff!important;
  font-size:7px!important;
  font-weight:900!important;
  letter-spacing:.7px!important;
}
.home-cd-copy{padding:9px!important}
.home-cd-copy b{
  display:-webkit-box!important;
  min-height:28px!important;
  overflow:hidden!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:2!important;
  color:#fff!important;
  font-size:10px!important;
  line-height:1.35!important;
}
.home-cd-copy small{
  display:block!important;
  margin:5px 0 8px!important;
  color:#887f7d!important;
  font-size:7px!important;
}
.home-cd-copy>a{
  display:block!important;
  padding:7px 5px!important;
  border:1px solid rgba(197,139,50,.42)!important;
  border-radius:6px!important;
  color:#c58b32!important;
  font-size:7px!important;
  font-weight:900!important;
  text-align:center!important;
  text-decoration:none!important;
}
.home-cd-copy>a:hover{background:#8c0000!important;border-color:#8c0000!important;color:#fff!important}

.cds-public-page{width:100%!important;box-sizing:border-box!important}
.cd-listing-hero{margin-top:18px!important}
.cd-public-search{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  gap:8px!important;
  margin:16px 0 20px!important;
  padding:10px!important;
  border:1px solid #302322!important;
  border-radius:10px!important;
  background:#0a0909!important;
}
.cd-public-search input{
  min-width:0!important;
  padding:10px 12px!important;
  border:1px solid #3f302e!important;
  border-radius:7px!important;
  background:#050505!important;
  color:#fff!important;
}
.cd-public-search button{
  border:0!important;
  border-radius:7px!important;
  padding:0 18px!important;
  background:#8c0000!important;
  color:#fff!important;
  font-size:8px!important;
  font-weight:900!important;
}
.cds-catalog-grid{
  display:grid!important;
  grid-template-columns:repeat(6,minmax(0,1fr))!important;
  gap:12px!important;
}
.cd-card{
  min-width:0!important;
  overflow:hidden!important;
  border:1px solid #352827!important;
  border-radius:10px!important;
  background:linear-gradient(145deg,#0e0d0d,#080707)!important;
}
.cd-cover-wrap{
  position:relative!important;
  aspect-ratio:1/1!important;
  overflow:hidden!important;
}
.cd-cover-wrap img{display:block!important;width:100%!important;height:100%!important;object-fit:cover!important}
.cd-zip-badge{
  position:absolute!important;
  top:7px!important;
  right:7px!important;
  padding:4px 6px!important;
  border-radius:5px!important;
  background:#8c0000!important;
  color:#fff!important;
  font-size:7px!important;
  font-weight:900!important;
}
.cd-card-copy{padding:10px!important}
.cd-card-copy h3{
  min-height:32px!important;
  margin:0!important;
  color:#fff!important;
  font-size:10px!important;
  line-height:1.4!important;
}
.cd-card-copy small{display:block!important;margin-top:6px!important;color:#867d7a!important;font-size:7px!important}
.cd-card-stats{margin:7px 0!important;color:#b7aaa6!important;font-size:7px!important}
.cd-download-btn{
  display:block!important;
  padding:8px 6px!important;
  border-radius:6px!important;
  background:linear-gradient(90deg,#8c0000,#6d0000)!important;
  color:#fff!important;
  font-size:7px!important;
  font-weight:900!important;
  text-align:center!important;
  text-decoration:none!important;
}

@media(max-width:1000px){
  .home-cds-grid,.cds-catalog-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}
}
@media(max-width:700px){
  .home-cds-grid,.cds-catalog-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media(max-width:480px){
  .home-cds-grid,.cds-catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .cd-public-search{grid-template-columns:1fr!important}
  .cd-public-search button{min-height:38px!important}
}


/* Unified public catalog view switch: MP3 / Mixes / Albums */
.listing-page .catalog-unified-view-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin:16px 0 10px;
  padding:11px 12px;
  border:1px solid rgba(197,139,50,.24);
  border-radius:10px;
  background:linear-gradient(145deg,rgba(140,0,0,.10),rgba(197,139,50,.04)),#090808;
}
.listing-page .catalog-unified-view-toolbar .cd-view-toolbar-copy small,
.listing-page .catalog-unified-view-toolbar .cd-view-toolbar-copy strong{display:block}
.listing-page .catalog-unified-view-toolbar .cd-view-toolbar-copy small{
  color:#c58b32;
  font-size:7px;
  font-weight:900;
  letter-spacing:1.2px;
}
.listing-page .catalog-unified-view-toolbar .cd-view-toolbar-copy strong{
  margin-top:2px;
  color:#fff;
  font-size:10px;
}
.listing-page .catalog-unified-view-toolbar .cd-view-switch{
  display:flex;
  gap:5px;
  padding:4px;
  border:1px solid #2f2422;
  border-radius:9px;
  background:#050505;
}
.listing-page .catalog-unified-view-toolbar .cd-view-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-width:92px;
  min-height:34px;
  padding:7px 10px;
  border:1px solid transparent;
  border-radius:7px;
  background:transparent;
  color:#817a78;
  cursor:pointer;
  font:inherit;
  font-size:8px;
  font-weight:900;
  letter-spacing:.5px;
  transition:.18s ease;
}
.listing-page .catalog-unified-view-toolbar .cd-view-btn:hover{
  color:#fff;
  border-color:#4d302a;
}
.listing-page .catalog-unified-view-toolbar .cd-view-btn.active{
  border-color:#8c0000;
  background:linear-gradient(90deg,#8c0000,#6f0805);
  color:#fff;
  box-shadow:0 5px 18px rgba(140,0,0,.18);
}
.listing-page .catalog-unified-view-toolbar .cd-view-icon{
  font-size:14px;
  line-height:1;
}
@media(max-width:480px){
  .listing-page .catalog-unified-view-toolbar{
    display:grid;
    grid-template-columns:1fr;
  }
  .listing-page .catalog-unified-view-toolbar .cd-view-switch{
    width:100%;
  }
  .listing-page .catalog-unified-view-toolbar .cd-view-btn{
    flex:1;
    min-width:0;
  }
}


/* Noticias — centrado global del encuadre de miniaturas y portadas de módulos.
   Solo cambia el punto de enfoque; conserva tamaños y object-fit existentes. */
.news-image img,
.news-list-image img,
.fp-news-img img,
.sidebar-news-thumb img,
.news-card img,
.news-list-card img,
.home-news-categories img,
[class*="news-"] img,
[class*="noticia-"] img{
  object-position:center center!important;
}


/* HOME / PRENSA — centrado real de la imagen dentro de la miniatura */
#prensa .news-card .news-image{
  position:relative!important;
  overflow:hidden!important;
}
#prensa .news-card .news-image > .cover-link{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  overflow:hidden!important;
}
#prensa .news-card .news-image > .cover-link > img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  object-fit:cover!important;
  object-position:50% 50%!important;
}


/* HOME / PRENSA — centrar verticalmente el bloque completo de la imagen */
#prensa .news-card{
  align-items:stretch!important;
}
#prensa .news-card .news-image{
  align-self:center!important;
}


/* HOME / PRENSA — imagen más grande y ajustada como en la página de Noticias */
#prensa .news-card{
  grid-template-columns:150px minmax(0,1fr)!important;
  align-items:stretch!important;
}
#prensa .news-card .news-image{
  width:100%!important;
  height:auto!important;
  min-height:128px!important;
  align-self:stretch!important;
  border-radius:8px!important;
}
#prensa .news-card .news-image > .cover-link{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
}
#prensa .news-card .news-image > .cover-link > img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center center!important;
}
@media(max-width:900px){
  #prensa .news-card{
    grid-template-columns:135px minmax(0,1fr)!important;
  }
  #prensa .news-card .news-image{
    min-height:118px!important;
  }
}
@media(max-width:560px){
  #prensa .news-card{
    grid-template-columns:110px minmax(0,1fr)!important;
  }
  #prensa .news-card .news-image{
    min-height:105px!important;
  }
}