@import "https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Roboto+Mono:wght@500&display=swap";@import "https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css";*{box-sizing:border-box;margin:0;padding:0}:root{--bg:#f8f6f5;--bg2:#eeeceb;--bg3:#e2e0df;--acento:#0e58ff;--acento2:#0e58ff;--texto:#111;--texto-mid:#888;--texto-low:#aaa;--radio:10px}body.dark{--bg:#110208;--bg2:#1e0610;--bg3:#2a0a18;--acento:#f95056;--acento2:#f95056;--texto:#f8f6f5;--texto-mid:#888;--texto-low:#444}body{background:var(--bg);color:var(--texto);min-height:100vh;padding-bottom:200px;font-family:Roboto,sans-serif;transition:background .3s,color .3s}a{color:inherit;text-decoration:none}button{cursor:pointer}.page-wrap{animation:.15s forwards pageFadeIn}@keyframes pageFadeIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.toast-container{z-index:9999;pointer-events:none;flex-direction:column;align-items:center;gap:8px;display:flex;position:fixed;bottom:210px;left:50%;transform:translate(-50%)}.toast{background:var(--texto);color:var(--bg);white-space:nowrap;pointer-events:none;border-radius:20px;padding:10px 20px;font-size:13px;font-weight:500;animation:.2s toastIn,.2s 2.3s forwards toastOut;box-shadow:0 4px 12px #00000026}@keyframes toastIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes toastOut{0%{opacity:1}to{opacity:0}}header{background:var(--bg);z-index:100;border-bottom:1px solid var(--bg2);justify-content:space-between;align-items:center;gap:12px;padding:1rem 1.5rem;transition:background .3s;display:flex;position:sticky;top:0}.logo img{object-fit:contain;width:auto;height:36px}.header-right{flex:1;align-items:center;gap:12px;display:flex}.search-bar{background:var(--bg2);border-radius:20px;flex:1;align-items:center;gap:8px;padding:8px 14px;transition:background .3s;display:flex}.search-bar i{color:var(--texto-low);font-size:14px}.search-bar input{color:var(--texto);background:0 0;border:none;outline:none;width:100%;font-family:Roboto,sans-serif;font-size:13px}.search-bar input::placeholder{color:var(--texto-low)}.header-actions{align-items:center;gap:14px;display:flex}.redes{gap:12px;display:flex}.redes a{color:var(--acento);font-size:18px;transition:opacity .2s}.redes a:hover{opacity:.7}.btn-modo{border:1px solid var(--bg3);color:var(--texto-mid);white-space:nowrap;background:0 0;border-radius:20px;align-items:center;gap:6px;padding:5px 12px;font-family:Roboto,sans-serif;font-size:11px;transition:all .2s;display:flex}.btn-modo:hover{background:var(--bg2)}.hero{padding:1.2rem 1.5rem .5rem}.hero-productor{color:#fff;letter-spacing:1.5px;text-transform:uppercase;background:var(--acento);border-radius:4px;margin-bottom:4px;padding:2px 8px;font-size:11px;font-weight:700;display:inline-block}body.dark .hero-productor{background:var(--acento2);color:#000}.hero-sub{color:var(--texto-mid);font-size:13px}.filtros{flex-direction:column;gap:10px;padding:1rem 1.5rem;display:flex}.chips-container{position:relative}.chips-container:after{content:"";background:linear-gradient(to right, transparent, var(--bg));pointer-events:none;z-index:2;width:48px;position:absolute;top:0;bottom:4px;right:0}.chips{scrollbar-width:none;gap:8px;padding-bottom:4px;display:flex;overflow-x:auto}.chips::-webkit-scrollbar{display:none}.chip{background:var(--bg2);color:var(--texto-mid);white-space:nowrap;border:none;border-radius:20px;padding:6px 14px;font-family:Roboto,sans-serif;font-size:12px;transition:all .2s}.chip.active{background:var(--acento);color:#fff;font-weight:600}body.dark .chip.active{background:var(--acento2);color:#000}.filtros-extra select{background:var(--bg2);color:var(--texto-mid);border:none;border-radius:8px;outline:none;padding:6px 12px;font-family:Roboto,sans-serif;font-size:11px}.catalogo{padding:0 1.5rem}.seccion-titulo{margin-bottom:10px;font-size:13px;font-weight:600;display:block}.cargando,.empty-state{color:var(--texto-low);padding:1rem 0;font-size:13px}.beat-row{border-radius:var(--radio);cursor:pointer;align-items:center;gap:12px;padding:10px 8px;transition:background .15s;display:flex;position:relative}.beat-row:hover,.beat-row.activo{background:var(--bg2)}.beat-play-btn{color:var(--texto-low);flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;font-size:18px;display:flex}.beat-row.activo .beat-play-btn{color:var(--acento)}body.dark .beat-row.activo .beat-play-btn{color:var(--acento2)}.beat-info{flex:1;min-width:0}.beat-titulo{white-space:nowrap;text-overflow:ellipsis;font-size:13px;font-weight:500;overflow:hidden}.beat-meta{color:var(--texto-mid);margin-top:2px;font-size:10px}.beat-duracion{color:var(--texto-low);flex-shrink:0;font-family:Roboto Mono,monospace;font-size:10px}.beat-count{color:var(--texto-low);flex-shrink:0;font-family:Roboto Mono,monospace;font-size:12px}.beat-row.activo .beat-count{color:var(--acento);font-weight:700}body.dark .beat-row.activo .beat-count{color:var(--acento2)}.beat-share{color:var(--texto-low);flex-shrink:0;font-size:13px;transition:color .2s}.beat-share:hover{color:var(--acento)}@keyframes eq1{0%,to{height:4px}50%{height:14px}}@keyframes eq2{0%,to{height:10px}50%{height:4px}}@keyframes eq3{0%,to{height:7px}50%{height:16px}}.equalizer{align-items:flex-end;gap:2px;width:18px;height:18px;display:flex}.equalizer span{background:var(--acento);border-radius:1px;width:3px}.equalizer span:first-child{animation:.8s ease-in-out infinite eq1}.equalizer span:nth-child(2){animation:.8s ease-in-out .1s infinite eq2}.equalizer span:nth-child(3){animation:.8s ease-in-out .2s infinite eq3}.equalizer.paused span{animation-play-state:paused}body.dark .equalizer span{background:var(--acento2)}.reproductor{background:var(--bg2);border-top:1px solid var(--bg3);z-index:200;flex-direction:column;gap:10px;padding:12px 1.5rem;transition:background .3s;display:flex;position:fixed;bottom:0;left:0;right:0}.rep-info-row{align-items:center;gap:10px;display:flex}.rep-cover{object-fit:cover;border-radius:6px;flex-shrink:0;width:38px;height:38px}.rep-cover-placeholder{background:var(--bg3);width:38px;height:38px;color:var(--texto-low);border-radius:6px;flex-shrink:0;justify-content:center;align-items:center;font-size:16px;display:flex}.rep-text{flex:1;min-width:0}.rep-titulo{white-space:nowrap;text-overflow:ellipsis;font-size:13px;font-weight:600;overflow:hidden}.rep-sub{color:var(--texto-mid);margin-top:1px;font-size:10px}.rep-controles{justify-content:center;align-items:center;gap:16px;display:flex}.rep-controles button{color:var(--texto-mid);background:0 0;border:none;align-items:center;font-size:16px;transition:color .2s;display:flex}.rep-controles button:hover{color:var(--texto)}.btn-play-main{color:var(--acento)!important;font-size:22px!important}body.dark .btn-play-main{color:var(--acento2)!important}.rep-controles button.activo{color:var(--acento)!important}body.dark .rep-controles button.activo{color:var(--acento2)!important}.rep-progreso{align-items:center;gap:8px;display:flex}.rep-progreso span{color:var(--texto-mid);flex-shrink:0;font-family:Roboto Mono,monospace;font-size:10px}.barra-progreso{background:var(--bg3);cursor:pointer;border-radius:2px;flex:1;height:4px;position:relative}.barra-fill{background:var(--acento);border-radius:2px;height:100%;transition:width .1s linear;position:relative}.barra-fill:after{content:"";background:var(--acento);width:13px;height:13px;box-shadow:0 0 0 2px var(--bg2);border-radius:50%;position:absolute;top:50%;right:-6px;transform:translateY(-50%)}body.dark .barra-fill{background:var(--acento2)}body.dark .barra-fill:after{background:var(--acento2);box-shadow:0 0 0 2px var(--bg2)}.rep-extras{justify-content:space-between;align-items:center;display:flex}.volumen{align-items:center;gap:8px;display:flex}.volumen i{color:var(--texto-mid);cursor:pointer;font-size:15px}.volumen input[type=range]{width:70px;accent-color:var(--acento);cursor:pointer}body.dark .volumen input[type=range]{accent-color:var(--acento2)}.velocidad{background:var(--bg);border-radius:8px;align-items:center;gap:8px;padding:4px 10px;display:flex}.velocidad button{color:var(--texto-mid);background:0 0;border:none;font-size:14px;line-height:1}.vel-display{color:var(--acento);text-align:center;min-width:32px;font-family:Roboto Mono,monospace;font-size:12px}body.dark .vel-display{color:var(--acento2)}.cookie-banner{background:var(--bg3);border-radius:var(--radio);color:var(--texto-mid);z-index:300;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;font-size:12px;display:flex;position:fixed;bottom:200px;left:1rem;right:1rem}.cookie-banner a{color:var(--acento)}body.dark .cookie-banner a{color:var(--acento2)}.cookie-banner button{background:var(--acento);color:#fff;border:none;border-radius:20px;padding:6px 14px;font-family:Roboto,sans-serif;font-size:12px;font-weight:600}body.dark .cookie-banner button{background:var(--acento2);color:#000}.cookie-banner.oculto{display:none}.auth-page{max-width:400px;margin:4rem auto;padding:2rem 1.5rem}.auth-page h2{color:var(--acento);margin-bottom:1.5rem;font-size:22px;font-weight:700}.auth-form{flex-direction:column;gap:12px;display:flex}.auth-form input{background:var(--bg2);color:var(--texto);border:none;border-radius:8px;outline:none;padding:10px 14px;font-family:Roboto,sans-serif;font-size:13px}.auth-form input::placeholder{color:var(--texto-low)}.btn-primary{background:var(--acento);color:#fff;border:none;border-radius:8px;width:100%;padding:10px 14px;font-family:Roboto,sans-serif;font-size:13px;font-weight:600;transition:opacity .2s}.btn-primary:hover{opacity:.85}body.dark .btn-primary{background:var(--acento2);color:#000}.auth-link{color:var(--texto-mid);text-align:center;margin-top:8px;font-size:12px}.auth-link a{color:var(--acento);font-weight:500}.auth-error{color:#ff3b30;text-align:center;font-size:12px}body.dark .hero a{color:var(--acento2)!important}.red-social-icon{color:var(--acento);font-size:18px;line-height:1;text-decoration:none;transition:opacity .2s}.red-social-icon:hover{opacity:.7}body.dark .red-social-icon{color:var(--acento2)}.destacado-count{color:var(--acento)}body.dark .destacado-count{color:var(--acento2)}.logo-hero{object-fit:contain;width:auto;height:40px}body.dark .logo-hero{filter:brightness(0)invert()}body.dark .avatar-productor,body.dark .avatar-productor-home{border-color:var(--acento2)!important}@media (width>=768px){header{padding:1.1rem 2rem}.logo img{height:38px}.search-bar{padding:9px 16px}.search-bar input{font-size:13.5px}.redes a{font-size:20px}.hero{padding:1.5rem 2rem .6rem}.hero-sub{font-size:14px}.filtros{padding:1.1rem 2rem}.chip{padding:7px 15px;font-size:12.5px}.filtros-extra select{padding:7px 13px;font-size:12px}.catalogo{padding:0 2rem}.seccion-titulo{font-size:14px}.beat-row{gap:14px;padding:11px 9px}.beat-titulo{font-size:14px}.beat-meta{font-size:11px}.beat-count{font-size:13px}.beat-duracion{font-size:11px}.reproductor{border-radius:var(--radio) var(--radio) 0 0;width:100%;max-width:650px;padding:13px 1.8rem;left:50%;right:auto;transform:translate(-50%)}.rep-titulo{font-size:14px}.rep-sub{font-size:11px}.rep-controles button{font-size:18px}.btn-play-main{font-size:25px!important}.rep-progreso span{font-size:11px}.volumen input[type=range]{width:80px}.vel-display{font-size:12.5px}.cookie-banner{max-width:560px;left:50%;right:auto;transform:translate(-50%)}.toast-container{bottom:220px}}