*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#090d1d;color:#f5f6ff;font-family:system-ui,-apple-system,Segoe UI,sans-serif;padding-bottom:125px}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button{cursor:pointer}.topbar{height:75px;display:flex;align-items:center;justify-content:space-between;padding:0 max(20px,calc((100vw - 1160px)/2));border-bottom:1px solid #24283d;background:#0e1225;gap:18px}.brand{font-size:20px;font-weight:750;white-space:nowrap}.brand strong{color:#9e75ff}.logo{display:inline-grid;place-items:center;background:linear-gradient(135deg,#3579fa,#9b48ec);width:37px;height:37px;border-radius:12px;margin-right:8px}.desktop-nav{display:flex;gap:23px;color:#b5b6ca}.desktop-nav a:hover{color:#fff}.profile{display:flex;align-items:center;gap:12px;font-size:13px}.container{max-width:1160px;margin:auto;padding:28px 20px}.hero{text-align:center;padding:70px 15px 90px;background:radial-gradient(ellipse at 50% 45%,#28235b88,transparent 60%)}.pill{border:1px solid #6755be;color:#bba8ff;padding:9px 22px;border-radius:40px;font-size:12px;letter-spacing:3px}.hero h1{font-size:clamp(38px,6vw,68px);line-height:1.15;letter-spacing:-2px}.hero h1 em{font-style:normal;background:linear-gradient(90deg,#3d8bff,#aa65fb);color:transparent;background-clip:text}.hero p,.panel>p{color:#a7aac0}.hero-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:28px}.btn{border:0;background:linear-gradient(115deg,#347cf8,#994bea);color:white;padding:12px 23px;border-radius:14px;font-weight:650;display:inline-block}.btn.ghost{background:#23253e}.panel{border:1px solid #292d45;background:linear-gradient(145deg,#191c31,#111527);padding:25px;border-radius:26px;margin-bottom:26px}.panel h1{font-size:30px}.section-heading{display:flex;justify-content:space-between;align-items:center;gap:15px}.section-heading h2{font-size:21px}.section-heading span,.track-info span,.track-info small{color:#a4a6bd}.filters{display:flex;gap:12px;flex-wrap:wrap;margin:20px 0}.filters input{flex:2;min-width:200px}.filters select{flex:1;min-width:145px}input,select,textarea{width:100%;background:#20233a;color:#f6f6ff;border:1px solid #3c3d57;border-radius:12px;padding:12px;outline:none}input:focus,select:focus,textarea:focus{border-color:#9470ff}.track-list{display:grid;gap:12px}.track{display:flex;align-items:center;gap:15px;flex-wrap:wrap;background:#202337;border:1px solid #35374d;border-radius:18px;padding:12px}.cover{width:67px;height:67px;flex:none;border-radius:13px;background:linear-gradient(135deg,#24204d,#6543c1);display:grid;place-items:center;font-size:28px;overflow:hidden}.cover img{width:100%;height:100%;object-fit:cover}.track-info{flex:1;min-width:150px;display:grid;gap:3px}.track-info strong{overflow-wrap:anywhere}.track-info span{font-size:13px}.track-info small{font-size:11px}.track-actions{display:flex;align-items:center;gap:7px}.icon-btn{border:1px solid #494765;background:#2e2c49;color:#c4b0ff;border-radius:50%;width:37px;height:37px;display:inline-grid;place-items:center}.small-btn{border:1px solid #5c548d;background:#27263f;color:#dfd8ff;padding:8px 12px;border-radius:10px;white-space:nowrap}.inline-form{display:inline-flex;margin:0}.add-to-list{display:flex;gap:5px;width:100%;max-width:240px}.add-to-list select{padding:7px;font-size:12px;min-width:0}.moderation{display:flex;gap:6px}.auth{max-width:510px;margin:25px auto}.auth.wide{max-width:730px}.auth form{display:grid;gap:17px}.auth label{display:grid;gap:7px;color:#c8c8d8}.auth label.check{display:flex;align-items:flex-start;gap:10px}.check input{width:auto;margin-top:5px}.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}.flash{background:#25294c;border:1px solid #6664c9;border-radius:14px;padding:15px;margin-bottom:20px}.empty{padding:45px;text-align:center;color:#a5a7be}.user-line{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:12px;border-bottom:1px solid #34354d;flex-wrap:wrap}.user-line span{overflow-wrap:anywhere}.playlist{margin-top:25px;padding:15px;border:1px solid #383b53;border-radius:18px}.player{position:fixed;bottom:0;left:0;right:0;z-index:5;display:flex;gap:15px;align-items:center;padding:12px max(20px,calc((100vw - 1160px)/2));background:#13162c;border-top:1px solid #48436a;box-shadow:0 -10px 45px #0008}.player-label{min-width:180px;display:grid;gap:3px}.player-label strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:230px}.player-label small{color:#aaa8bf}.player audio{flex:1;min-width:0;height:40px}.bottom-nav{display:none}@media(max-width:850px){.desktop-nav{display:none}.topbar{height:64px}.profile span{display:none}.container{padding:15px}.hero{padding:60px 8px}.panel{padding:16px;border-radius:19px}.track{gap:9px}.cover{width:56px;height:56px}.track-info{min-width:120px}.track-actions{margin-left:auto}.add-to-list{max-width:none}.player{bottom:65px;padding:7px 12px}.player-label{min-width:95px;max-width:130px}.player-label strong{max-width:130px;font-size:12px}.player audio{height:35px}.bottom-nav{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:6;background:#16182e;border-top:1px solid #3b3b59;height:65px;justify-content:space-around;align-items:center}.bottom-nav a{display:grid;place-items:center;gap:1px;font-size:23px;color:#b5b4d6}.bottom-nav small{font-size:10px}.filters{display:grid}.two{grid-template-columns:1fr}body{padding-bottom:150px}}

/* v1.1: playlists y análisis de audio */
.playlist-tools,.rename-form{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rename-form input{width:min(260px,65vw)}
.analysis-status{padding:13px;border-radius:12px;background:#242844;color:#c7c8ee;font-size:13px}
.upload-progress{padding:18px;background:#202842;border:1px solid #5955a1;border-radius:16px;text-align:center}
.upload-progress:not([hidden]){display:grid;justify-items:center;gap:10px}
.upload-progress progress{width:100%;height:15px;accent-color:#8663ff}
.spinner{width:34px;height:34px;border:4px solid #4c4a77;border-top-color:#ae82ff;border-radius:50%;animation:dj-spin .8s linear infinite}
@keyframes dj-spin{to{transform:rotate(360deg)}}
@media(max-width:650px){.playlist .section-heading{align-items:flex-start;flex-direction:column}.rename-form input{width:min(240px,55vw)}}

/* v1.3: filtros armónicos y eliminación */
.harmonic-option{display:flex;align-items:center;gap:8px;font-size:13px;max-width:320px}
.harmonic-option input{width:auto;flex:none}
.small-btn.danger{border-color:#b83d5b;color:#ff9aac;background:#3a1727}
.delete-track-form{margin-top:6px}
.filters input[type=number]{min-width:105px;max-width:140px}
@media(max-width:680px){.filters input[type=number]{max-width:none;width:100%}.harmonic-option{max-width:none}}

/* v1.4: búsqueda y filtros del catálogo con contraste y jerarquía visual */
.catalog-panel{background:linear-gradient(145deg,#191e39,#101629);border-color:#3d4770}
.catalog-heading{align-items:center;flex-wrap:wrap;margin-bottom:22px}
.catalog-heading h2{font-size:clamp(24px,3vw,31px);margin:5px 0 7px;color:#fff}
.eyebrow{font-size:11px;font-weight:800;letter-spacing:2px;color:#b7a2ff}
.filter-description{margin:0;color:#c0c9e3;font-size:14px}
.results-counter{display:inline-flex;background:#293456;border:1px solid #5367a1;border-radius:999px;padding:9px 14px;color:#e7ebff!important;font-size:12px;font-weight:700;white-space:nowrap}
.catalog-filters{background:#111a31;border:1px solid #3b507a;border-radius:20px;padding:20px;display:grid;gap:19px;box-shadow:0 12px 35px #05091755}
.catalog-filters label{display:block;font-size:13px;font-weight:750;color:#e7ecff;margin-bottom:8px}
.catalog-filters input,.catalog-filters select{background:#232e4d;border:1px solid #63749f;color:#fff;border-radius:12px;min-height:49px;padding:12px 14px;width:100%;max-width:none}
.catalog-filters input::placeholder{color:#b6c2dd;opacity:1}
.catalog-filters input:focus,.catalog-filters select:focus{border-color:#bca2ff;outline:2px solid #9b79ff66;outline-offset:1px}
.search-field{display:flex;align-items:center;gap:8px;background:#232e4d;border:1px solid #63749f;border-radius:13px;padding-left:15px}
.search-field span{font-size:28px;line-height:1;color:#c8b7ff}
.search-field input{border:0;background:transparent;font-size:16px;min-width:0}
.search-field:focus-within{outline:2px solid #9b79ff66;border-color:#bca2ff}
.search-field input:focus{outline:none;border:0}
.filter-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:13px}
.filter-field{grid-column:span 2;min-width:0}
.filter-field:nth-child(3),.filter-field:nth-child(4),.filter-field:nth-child(5){grid-column:span 2}
.catalog-filters .harmonic-card{display:flex;gap:12px;align-items:flex-start;background:#24284a;border:1px solid #4e568b;border-radius:13px;padding:14px;margin:0;cursor:pointer}
.harmonic-card input{width:19px;height:19px;min-height:0;flex:none;margin:2px 0 0;accent-color:#9672ff}
.harmonic-card span{display:grid;gap:5px}.harmonic-card strong{color:#fff;font-size:13px}.harmonic-card small{font-size:12px;color:#c3c9e4;line-height:1.5}
.filter-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.filter-submit{min-height:48px;padding:12px 28px;font-size:14px}
.filter-reset{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:11px 18px;border:1px solid #64739b;border-radius:12px;color:#e2e8ff;font-size:13px;font-weight:700;background:#27324e}
.filter-reset:hover{background:#354265}
.active-filter-note{margin-top:16px;color:#d0d9f8;font-size:13px}.active-filter-note a{color:#bca7ff;text-decoration:underline}
@media(max-width:750px){.filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.filter-field,.filter-field:nth-child(3),.filter-field:nth-child(4),.filter-field:nth-child(5){grid-column:span 1}.catalog-filters{padding:15px;gap:15px}.filter-actions>*{flex:1;text-align:center}.catalog-heading{align-items:flex-start}.results-counter{white-space:normal}}
@media(max-width:480px){.filter-field:nth-child(1),.filter-field:nth-child(2),.filter-field:nth-child(5){grid-column:span 2}.filter-actions{display:grid;grid-template-columns:1fr}.filter-reset{width:100%}}

/* Edición de metadatos v1.5 */
.track-edit-panel { width:100%; margin-top:12px; padding:12px; border:1px solid rgba(150,160,210,.3); border-radius:12px; }
.track-edit-panel summary { cursor:pointer; display:inline-block; list-style:none; }
.track-edit-form { display:grid; gap:12px; padding-top:16px; }
.track-edit-form label { display:grid; gap:6px; min-width:0; }
.track-edit-form input, .track-edit-form textarea { width:100%; min-width:0; box-sizing:border-box; }
.track-edit-form .btn { justify-self:start; }
@media(max-width:650px) { .track-edit-form .two { display:grid; grid-template-columns:1fr; } }

/* v1.6: editor modal de tracks y portadas */
.dj-modal[hidden] { display:none !important; }
.dj-modal { position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:18px; }
.dj-modal-backdrop { position:absolute; inset:0; background:rgba(2,5,18,.82); backdrop-filter:blur(5px); }
.dj-modal-dialog { position:relative; background:#171d35; border:1px solid #6671a6; border-radius:22px; padding:22px; width:min(760px,100%); max-height:calc(100dvh - 36px); overflow-y:auto; box-shadow:0 25px 90px #000a; }
.dj-modal-header,.dj-modal-footer { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.dj-modal-header h2 { margin:6px 0 12px; }
.dj-modal-close { background:#303a5b; color:white; border:1px solid #59658e; border-radius:12px; width:40px; height:40px; font-size:27px; }
.dj-modal-form { padding-top:4px; }
.dj-modal-form label { color:#dce3ff; font-size:13px; font-weight:650; }
.dj-modal-form label input,.dj-modal-form label textarea { margin-top:5px; }
.cover-editor { display:flex; align-items:center; gap:16px; background:#202944; padding:14px; border:1px solid #49577e; border-radius:15px; }
.cover-preview { flex:none; width:116px; height:116px; display:grid; place-items:center; border-radius:13px; background:linear-gradient(130deg,#324c8e,#7040b3); font-size:40px; overflow:hidden; }
.cover-preview img { width:100%; height:100%; object-fit:cover; }
.cover-editor-fields { flex:1; min-width:0; }
.cover-editor-fields small { display:block; color:#aebcdb; margin-top:9px; }
.cover-remove-label { display:flex!important; align-items:center; gap:8px; margin-top:10px; }
.cover-remove-label input { width:auto!important; margin:0!important; }
.dj-modal-footer { justify-content:flex-end; margin-top:6px; }
.dj-modal-open { overflow:hidden; }
@media(max-width:600px) { .dj-modal { padding:8px; } .dj-modal-dialog { padding:15px; max-height:calc(100dvh - 16px); } .cover-editor { flex-direction:column; align-items:stretch; } .cover-preview { width:100%; height:130px; } }

/* v1.7 - Hot Cues personales */
.player { flex-wrap:wrap; }
.cue-studio { flex-basis:100%; width:100%; padding:12px 4px 4px; color:#e9ecff; }
.cue-studio[hidden] { display:none; }
.cue-head { display:flex; justify-content:space-between; gap:12px; margin-bottom:10px; }
.cue-head small { color:#aeb7d1; }
#cue-waveform { display:block; width:100%; height:72px; border-radius:9px; cursor:crosshair; margin-bottom:10px; }
.cue-pads { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:7px; margin-bottom:8px; }
.cue-pad { display:flex; flex-direction:column; gap:3px; min-width:0; text-align:center; }
.cue-trigger { background:#202d43; border:2px solid #526078; border-radius:8px; color:#fff; padding:8px 2px; cursor:pointer; font-weight:700; }
.cue-pad span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; }
.cue-tools { display:flex; justify-content:center; gap:5px; }
.cue-tools button { background:#283750; color:#fff; border:0; border-radius:5px; cursor:pointer; padding:2px 9px; }
.cue-tools button:disabled { opacity:.3; cursor:default; }
.cue-studio > small { color:#aeb7d1; }
@media(max-width:700px) { .cue-pads { grid-template-columns:repeat(4,minmax(0,1fr)); } .cue-head { flex-direction:column; } }