@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:160px;font-family:Roboto,sans-serif;transition:background .3s,color .3s}a{color:inherit;text-decoration:none}button{cursor:pointer}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}body.dark .logo img{filter:none}.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}body.dark .redes a{color:var(--acento2)}.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;padding:5px 12px;font-family:Roboto,sans-serif;font-size:11px;transition:all .2s}.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{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}.beat-row:hover,.beat-row.activo{background:var(--bg2)}.beat-play-btn{color:var(--texto-low);text-align:center;flex-shrink:0;width:20px;font-size:18px}.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-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)}.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{flex-direction:column;gap:2px;display:flex}.rep-titulo{font-size:13px;font-weight:600}.rep-sub{color:var(--texto-mid);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:3px}.barra-fill{background:var(--acento);border-radius:2px;height:100%;transition:width .1s linear}body.dark .barra-fill{background:var(--acento2)}.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);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:160px;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}@media (width>=600px){.reproductor{border-radius:var(--radio) var(--radio) 0 0;max-width:600px;margin:0 auto;left:0;right:0}.cookie-banner{max-width:560px;margin:0 auto}}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}