:root { color: #28213a; background: #eee9e1; font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
* { box-sizing: border-box; } body { min-width: 320px; margin: 0; background: radial-gradient(circle at 8% 2%, #dac8df 0, transparent 27rem), radial-gradient(circle at 92% 15%, #bed8dc 0, transparent 31rem), repeating-linear-gradient(125deg, #fff8 0 1px, transparent 1px 8px), #eee9e1; }
button, input, select, textarea { font: inherit; } button { cursor: pointer; transition: transform .18s, box-shadow .18s, background .18s; } button:not(:disabled):hover { transform: translateY(-1px); } button:disabled { cursor: not-allowed; opacity: .5; } input, select, textarea { outline-color: #9b6dad; } h1,h2,h3,p { margin-top: 0; }
.app-shell { width: min(1150px, calc(100% - 40px)); margin: auto; padding: 22px 0 88px; }.topbar { position: sticky; z-index: 15; top: 12px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:11px 14px 11px 18px; border:1px solid #fff9; border-radius:18px; background:#f7f3eddd; box-shadow:0 10px 25px #382a4117; backdrop-filter:blur(14px); }.brand { display:inline-flex; align-items:center; gap:10px; color:#29223a; font-size:1.16rem; text-decoration:none; }.brand b { color:#794c8c; }.record,.empty-record { display:grid; place-items:center; width:29px; height:29px; border:7px solid #2e263c; border-radius:50%; background:#d7a87d; box-shadow:inset 0 0 0 4px #c8b8d8,0 3px 7px #36253f30; } nav { display:flex; gap:3px; padding:4px; border-radius:99px; background:#e9e3dd; }.nav-link { border:0; border-radius:99px; padding:9px 14px; color:#635a69; background:transparent; font-size:.85rem; font-weight:800; }.nav-link.active { color:#fff; background:linear-gradient(135deg,#49365c,#70507b); box-shadow:0 3px 9px #49365c35; }.local-note { display:inline-flex; margin:14px 0 0; padding:6px 10px; border:1px solid #d9d0c7; border-radius:99px; color:#6e6670; background:#f7f3efad; font-size:.76rem; }
.hero,.catalog-hero { position:relative; display:flex; align-items:end; justify-content:space-between; gap:35px; padding:68px 24px 48px; overflow:hidden; }.hero::after,.catalog-hero::after { position:absolute; z-index:-1; top:-70px; right:5%; width:225px; height:225px; border:20px solid #5c486d1b; border-radius:50%; box-shadow:inset 0 0 0 28px #c69b7810,inset 0 0 0 55px #5c486d0d; content:""; }.eyebrow { margin:0 0 10px; color:#9a5b72; font-size:.72rem; font-weight:900; letter-spacing:.14em; text-transform:uppercase; } h1 { max-width:720px; margin-bottom:15px; color:#2a2139; font-family:Georgia,serif; font-size:clamp(2.8rem,6vw,5.25rem); line-height:.92; letter-spacing:-.065em; }.lead { max-width:640px; margin-bottom:0; color:#625b67; font-size:1.04rem; line-height:1.65; }.flow { display:flex; align-items:center; min-width:300px; color:#716879; font-size:.72rem; text-align:center; }.flow-step { min-width:60px; }.flow-step::first-line { color:#fff; font-weight:900; }.flow-step.current { color:#543d6d; }.flow-step.current::first-line { color:#c07975; }.flow i { width:28px; height:1px; background:#cfc5c6; }
.panel { position:relative; margin-top:20px; padding:28px; border:1px solid #fff; border-radius:24px; background:#faf8f4e8; box-shadow:0 14px 35px #3c2d4314; }.panel::before { position:absolute; top:0; left:28px; width:56px; height:3px; border-radius:0 0 6px 6px; background:linear-gradient(90deg,#a65e79,#d09b69); content:""; }.panel-heading { display:flex; gap:14px; align-items:start; margin-bottom:22px; }.panel-heading>div { min-width:0; }.panel-number { display:grid; place-items:center; flex:0 0 34px; height:34px; border:1px solid #dfc9d5; border-radius:50%; color:#87516f; background:#f7e9e8; font-size:.74rem; font-weight:900; }.panel h2 { margin:0 0 4px; color:#3b2c49; font-size:1.2rem; }.panel-heading p { margin:0; color:#776d76; line-height:1.45; }.compact-heading { align-items:center; margin-bottom:0; }.compact-heading>div { flex:1; }.compact-heading .secondary { margin:0; white-space:nowrap; }
.primary,.secondary,.danger { border:0; border-radius:11px; padding:11px 16px; font-weight:850; }.primary { margin-top:20px; color:#fff; background:linear-gradient(135deg,#68417a,#9a5871); box-shadow:0 7px 15px #73446338; }.secondary { margin-top:20px; color:#543f62; background:#eee6e8; }.secondary:not(:disabled):hover { background:#e4d7e2; }.danger { color:#fff; background:#a34e57; }.text-button { margin-top:14px; border:0; padding:0; color:#83506e; background:transparent; font-weight:800; text-decoration:underline; text-underline-offset:4px; }
.dropzone { display:grid; min-height:156px; place-items:center; gap:7px; padding:20px; border:1.5px dashed #b78498; border-radius:18px; background:repeating-linear-gradient(-45deg,#fffaf8,#fffaf8 9px,#f8f2ee 9px,#f8f2ee 18px); color:#453646; text-align:center; cursor:pointer; }.dropzone:hover { border-color:#87506f; }.dropzone strong { font-size:1.08rem; }.dropzone span { color:#796e76; }.dropzone input { max-width:100%; margin-top:7px; }.selection-actions,.draft-actions,.taxonomy-launchers { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }.selection-actions { gap:16px; }.selection-actions .secondary { margin-top:14px; }.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; clip-path:inset(50%); }.file-summary,.batch-summary { display:flex; align-items:center; gap:12px; padding:15px; border:1px solid #e7ded8; border-radius:15px; background:#f3eee9; }.file-summary>span:last-child { margin-left:auto; color:#695d6d; font-weight:800; }.file-summary strong,.file-summary small { display:block; }.file-summary small { margin-top:3px; color:#7a7077; }.file-summary>span:first-child { display:grid; place-items:center; width:34px; height:34px; border-radius:10px; color:#fff; background:#79516f; font-size:1.2rem; }.progress-label { display:flex; justify-content:space-between; margin-top:22px; color:#5f5764; } progress { width:100%; height:10px; margin-top:8px; accent-color:#955c79; }.result-row { display:flex; align-items:center; gap:10px; margin-top:18px; color:#386b53; }.success-dot { display:grid; place-items:center; width:23px; height:23px; border-radius:50%; color:#fff; background:#549875; font-size:.8rem; font-weight:800; }.result-row audio { max-width:300px; height:34px; margin-left:auto; }
.batch-summary { justify-content:space-between; color:#554454; background:#f8f3f1; }.batch-summary .secondary { margin:0; }.batch-list,.library-list,.genre-editor,.stats-ranking,.queue-items { display:grid; gap:9px; }.batch-list { margin-top:14px; }.batch-item { display:grid; grid-template-columns:30px 1fr auto; align-items:center; gap:11px; padding:11px; border:1px solid #e6dedb; border-radius:12px; background:#fffdfa; }.batch-state { display:grid; place-items:center; width:27px; height:27px; border-radius:50%; color:#776e79; background:#eee7e8; font-weight:900; }.batch-item.done .batch-state { color:#fff; background:#579570; }.batch-item.error .batch-state { color:#fff; background:#b35b60; }.batch-item.converting .batch-state { color:#fff; background:#825374; }.batch-item strong,.batch-item small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.batch-item small { margin-top:3px; color:#7a7079; font-size:.8rem; }.batch-item progress { height:6px; margin-top:7px; }.batch-item-actions { display:flex; gap:10px; }.batch-item-actions .secondary,.batch-item-actions .text-button { margin:0; padding:7px 10px; }.batch-actions { margin-top:18px; }
.form-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }.form-grid label,.replacement-note { display:grid; gap:7px; color:#514555; font-size:.87rem; font-weight:850; }.form-grid input,.form-grid select,.form-grid textarea,.replacement-note input,.genre-row input,.delete-confirmation input { width:100%; border:1px solid #ddd2d5; border-radius:10px; padding:10px 11px; color:#30283a; background:#fffdfb; }.form-grid textarea { resize:vertical; }.wide { grid-column:span 2; }.admin-preview { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:0 0 22px; padding:15px; border:1px solid #eadde0; border-radius:15px; background:linear-gradient(100deg,#f9f4ef,#fbf7f7); color:#514052; }.admin-preview b,.admin-preview small { display:block; }.admin-preview small { margin-top:3px; color:#7b7077; }.admin-preview audio { width:min(360px,100%); }.classification-group { margin:0; padding:0; border:0; }.classification-group legend { margin-bottom:8px; color:#514555; font-size:.87rem; font-weight:850; }.option-chips,.suggestions div,.tag-list { display:flex; flex-wrap:wrap; gap:8px; }.option-chip,.suggestion-chip,.suggestions span,.tag-list span { border:1px solid #decdd4; border-radius:999px; padding:7px 10px; color:#704a67; background:#fffaf9; font-size:.8rem; font-weight:750; }.option-chip.selected,.suggestion-chip.selected { border-color:#80506f; color:#fff; background:#80506f; }.suggestions { margin-top:20px; padding:15px; border-radius:14px; background:#f5efee; }.suggestions p { margin:0 0 10px; color:#594657; }.draft-actions { margin-top:20px; }.form-message { min-height:20px; margin:14px 0 0; color:#477459; font-weight:700; }.error { margin:16px 0 0; padding:12px 14px; border-radius:11px; color:#923c43; background:#fff0ef; }.analysis-action { justify-self:start; margin:-7px 0 0; padding:9px 13px; }.analysis-message { min-height:18px; margin:-10px 0 0; color:#68506b; font-size:.84rem; font-weight:700; }
.artwork-preview { display:grid; min-height:118px; place-items:center; overflow:hidden; border:1px dashed #cfb7c2; border-radius:13px; color:#805069; background:linear-gradient(145deg,#fbf2ed,#f4e9ed); text-align:center; }.artwork-preview span { font-family:Georgia,serif; font-size:2rem; font-weight:900; }.artwork-preview small { color:#7b6e78; }.artwork-preview img { width:100%; height:100%; object-fit:cover; }.replace-compare { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:18px; }.replace-compare>div { display:grid; gap:8px; padding:14px; border:1px solid #e8dddd; border-radius:14px; background:#fffdfa; color:#4d4050; }.replace-compare audio { width:100%; }.dropzone.compact { min-height:118px; }.audio-history { display:grid; gap:9px; margin-top:24px; }.audio-history h3 { margin:0; color:#4b3c5b; font-size:1rem; }.audio-history article { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px; border:1px solid #e8dedf; border-radius:12px; background:#fffdfa; }.audio-history b,.audio-history small { display:block; }.audio-history small { margin-top:3px; color:#766d76; }.audio-history .secondary { margin:0; padding:8px 12px; }
.taxonomy-launchers .secondary { margin:0; }.taxonomy-dialog,.local-dialog { width:min(700px,calc(100% - 28px)); max-height:min(84vh,820px); border:0; border-radius:22px; padding:25px; color:#352b40; background:#fcfaf7; box-shadow:0 24px 75px #21172d55; }.local-dialog { width:min(780px,calc(100% - 28px)); }.taxonomy-dialog::backdrop,.local-dialog::backdrop { background:#251a2caa; backdrop-filter:blur(3px); }.taxonomy-dialog-heading { display:flex; align-items:start; justify-content:space-between; gap:20px; margin-bottom:20px; }.taxonomy-dialog-heading h2 { margin-bottom:8px; color:#3d2e4b; font-family:Georgia,serif; font-size:1.8rem; }.taxonomy-dialog-heading p:not(.eyebrow) { margin-bottom:0; color:#746a73; }.close-dialog { border:0; color:#654b62; background:transparent; font-size:1.85rem; }.genre-editor { max-height:48vh; overflow:auto; padding-right:3px; }.genre-row { display:grid; grid-template-columns:28px 1fr auto auto auto; align-items:center; gap:8px; padding:8px; border:1px solid #e7dddd; border-radius:11px; background:#fffdfb; }.genre-row>span,.stats-ranking article>span { display:grid; place-items:center; width:26px; height:26px; border-radius:50%; color:#7a4d69; background:#f2e5e7; font-size:.75rem; font-weight:800; }.genre-row .secondary { margin:0; padding:7px 10px; }.genre-row .text-button { margin:0; padding:7px 4px; white-space:nowrap; }.genre-actions { margin-top:16px; }.local-dialog .library-list,.local-dialog .stats-ranking { max-height:58vh; overflow:auto; }
.library-item { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:13px; padding:13px; border:1px solid #e7dfdc; border-radius:13px; background:#fffdfb; }.library-item strong,.library-item small { display:block; }.library-item small { margin-top:3px; color:#786e76; }.library-status { padding:5px 8px; border-radius:999px; color:#7c6038; background:#fff0d9; font-size:.72rem; font-weight:800; }.library-status.published { color:#35694c; background:#e1f1e3; }.library-status.hidden { color:#625c69; background:#e9e5e9; }.library-status.trashed { color:#81464b; background:#f9e5e6; }.library-actions { display:flex; flex-wrap:wrap; justify-content:end; gap:7px; }.library-item .secondary,.library-item .danger { margin:0; padding:8px 12px; }.delete-confirmation { display:grid; gap:12px; margin-top:18px; padding:17px; border:1px solid #edcfd1; border-radius:14px; background:#fff7f7; }.delete-confirmation h3 { margin:0; color:#843f46; }.delete-confirmation p { margin:0; color:#6e585d; line-height:1.5; }.delete-confirmation label { display:grid; gap:7px; color:#604a4f; font-size:.86rem; font-weight:800; }.delete-confirmation .draft-actions { margin-top:0; }.delete-confirmation .secondary,.delete-confirmation .danger { margin-top:0; }
.stats-summary { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }.stats-summary article { padding:17px; border:1px solid #eadde1; border-radius:15px; background:linear-gradient(145deg,#fffaf7,#f5eced); }.stats-summary strong,.stats-summary span { display:block; }.stats-summary strong { color:#693f75; font-family:Georgia,serif; font-size:2rem; line-height:1; }.stats-summary span { margin-top:6px; color:#716773; font-size:.82rem; font-weight:700; }.stats-ranking { margin-top:21px; }.stats-ranking h3 { margin:0 0 3px; color:#463656; font-size:1rem; }.stats-ranking article { display:grid; grid-template-columns:28px 1fr auto; align-items:center; gap:10px; padding:10px; border:1px solid #e8dedf; border-radius:11px; background:#fffdfb; }.stats-ranking b,.stats-ranking small { display:block; }.stats-ranking small { margin-top:3px; color:#776e76; font-size:.78rem; }.stats-ranking em { color:#a25977; font-size:.82rem; font-style:normal; font-weight:800; }
.catalog-hero { padding-bottom:32px; }.catalog-controls { display:grid; grid-template-columns:minmax(190px,1.5fr) repeat(4,minmax(135px,1fr)) auto; align-items:end; gap:12px; margin:0 0 23px; padding:18px; border:1px solid #fff; border-radius:20px; background:#faf8f5de; box-shadow:0 10px 24px #3c2d4310; }.catalog-controls label,.playlist-controls label { display:grid; gap:6px; color:#5d5260; font-size:.78rem; font-weight:850; }.catalog-controls input,.catalog-controls select,.playlist-controls input,.playlist-controls select { min-width:0; border:1px solid #ddd2d4; border-radius:9px; padding:10px; color:#2e2737; background:#fffdfb; }.catalog-controls .text-button { margin:0 0 9px; white-space:nowrap; }.listener-list { display:grid; grid-template-columns:1fr auto; gap:16px; margin:0 0 22px; padding:21px; border:1px solid #efe5e3; border-radius:19px; background:linear-gradient(110deg,#f9f2ef,#fffdf9); box-shadow:0 9px 24px #4530490b; }.listener-list h2 { margin-bottom:0; color:#493652; font-family:Georgia,serif; font-size:1.35rem; }.playlist-tools { display:flex; flex-wrap:wrap; align-items:start; justify-content:end; gap:10px; }.playlist-tools .secondary,.playlist-tools .text-button { margin:0; }.playlist-controls { display:grid; grid-template-columns:1fr 1fr auto; grid-column:1/-1; gap:10px; align-items:end; }.playlist-controls .secondary { margin:0; padding:10px 13px; }.queue-items { grid-column:1/-1; }.queue-items article { display:grid; grid-template-columns:34px 1fr auto; align-items:center; gap:10px; padding:10px; border:1px solid #ebe3e0; border-radius:11px; background:#fffdfb; }.queue-items b,.queue-items small { display:block; }.queue-items small { margin-top:2px; color:#776e76; font-size:.78rem; }.play-queued { width:32px; height:32px; border:0; border-radius:50%; color:#fff; background:#80516f; }.queue-items .text-button { margin:0; }.empty-queue { margin:4px 0; color:#786f78; font-size:.9rem; }.empty-state { padding:58px 24px; border:1px dashed #cfc1c4; border-radius:24px; color:#716976; background:#f8f4f0aa; text-align:center; }.empty-record { width:48px; height:48px; margin-bottom:12px; color:#fff; font-size:1.2rem; }.empty-state h2 { margin-bottom:8px; color:#42384f; font-family:Georgia,serif; }.empty-state p { margin-bottom:0; }
.song-grid { display:grid; gap:15px; }.catalog-song { display:grid; grid-template-columns:105px 1fr auto; align-items:center; gap:20px; padding:15px; border:1px solid #fff; border-radius:20px; background:#fbf9f5e8; box-shadow:0 12px 27px #3c2d4312; transition:transform .2s,box-shadow .2s; }.catalog-song:hover { transform:translateY(-3px); box-shadow:0 17px 32px #3c2d4320; }.catalog-song .artwork { width:105px; }.artwork,.detail-artwork { display:grid; place-items:center; overflow:hidden; aspect-ratio:1; border-radius:16px; color:#f9eff1; background:radial-gradient(circle at 35% 26%,#e4bc84 0 3px,transparent 4px),repeating-radial-gradient(circle at center,#33243e 0 6px,#4e3458 7px 9px); box-shadow:7px 9px 0 #d9c7c4,0 10px 20px #2c1e3430; font-size:2.2rem; font-weight:900; }.artwork img,.detail-artwork img { width:100%; height:100%; object-fit:cover; }.catalog-song h2 { margin-bottom:5px; color:#332541; font-family:Georgia,serif; font-size:1.45rem; }.catalog-song p:not(.eyebrow) { margin-bottom:10px; color:#746a73; }.catalog-song .secondary { margin:0; white-space:nowrap; }.catalog-song-actions,.listener-actions { display:flex; flex-wrap:wrap; align-items:center; justify-content:end; gap:8px; }.icon-action { border:1px solid #dac9d1; border-radius:10px; padding:9px 11px; color:#704760; background:#fffdfb; font-weight:800; }.icon-action.selected { border-color:#a85e80; color:#fff; background:#a85e80; }.listener-actions { justify-content:start; margin-top:21px; }.listener-actions .primary { margin:0; }
.public-detail { padding-bottom:110px; }.back-catalog { margin:8px 0 21px; }.detail-hero { display:grid; grid-template-columns:minmax(190px,290px) 1fr; gap:38px; align-items:center; padding:32px; border:1px solid #fff; border-radius:25px 25px 0 0; background:#fbf9f5; box-shadow:0 14px 34px #3c2d4313; }.detail-artwork { font-size:3.1rem; }.detail-hero h1 { margin-bottom:12px; font-size:clamp(2.7rem,5vw,4.7rem); }.detail-hero .tag-list { margin-top:18px; }.detail-hero .primary { margin-top:21px; }.detail-hero .download-link { margin-left:16px; }.download-link { display:inline-block; margin-top:12px; color:#8b4969; font-weight:850; }.detail-tabs { display:flex; gap:23px; padding:0 30px; border-bottom:1px solid #e4dadd; background:#fbf9f5; }.detail-tabs button { border:0; border-bottom:3px solid transparent; padding:16px 2px 12px; color:#7a7078; background:transparent; font-weight:850; }.detail-tabs button.active { border-color:#a35c7a; color:#593e64; }.detail-pane { display:none; padding:26px 30px; border:1px solid #fff; border-top:0; border-radius:0 0 25px 25px; background:#fbf9f5; box-shadow:0 18px 38px #3c2d4312; }.detail-pane.active { display:grid; grid-template-columns:1fr 1fr; gap:20px; }.detail-pane article,.lyrics-scroll { min-width:0; padding:18px; border:1px solid #eadfe0; border-radius:15px; background:#fffdfa; }.detail-pane h2 { margin-bottom:10px; color:#453451; font-family:Georgia,serif; }.scroll-copy,.lyrics-scroll { max-height:205px; overflow:auto; color:#665c68; line-height:1.65; white-space:pre-line; }.detail-pane#detail-lyrics.active { display:block; }.lyrics-heading { display:flex; align-items:center; justify-content:space-between; gap:14px; }.lyrics-heading .secondary { margin:0; padding:9px 12px; }.lyrics-scroll { max-height:330px; }
/* El reproductor queda deliberadamente sobrio: tendrá un diseño propio después. */ .bottom-player { position:fixed; z-index:20; right:0; bottom:0; left:0; display:grid; grid-template-columns:58px minmax(160px,440px) auto; align-items:center; justify-content:center; gap:14px; padding:10px max(18px,calc((100vw - 1110px)/2)); color:#fff; background:linear-gradient(110deg,#292234,#42334b); box-shadow:0 -8px 30px #21172d38; }.player-artwork { display:grid; place-items:center; width:55px; height:55px; overflow:hidden; border-radius:9px; background:repeating-radial-gradient(circle,#694577 0 5px,#332342 6px 8px); font-weight:900; }.player-artwork img { width:100%; height:100%; object-fit:cover; }.player-song { min-width:0; }.player-song strong,.player-song small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.player-song small { margin-top:2px; color:#d0c5da; font-size:.76rem; }.visualizer { display:flex; align-items:end; gap:3px; height:23px; margin-top:5px; }.visualizer i { width:4px; height:var(--bar); max-height:23px; border-radius:5px; background:linear-gradient(to top,var(--visualizer-colors)); transform-origin:bottom; animation:idle-bars 2.8s ease-in-out infinite; }.bottom-player.is-playing .visualizer i { animation:playing-bars .85s ease-in-out infinite; }.player-controls { display:flex; gap:8px; }.player-controls button { display:grid; place-items:center; width:34px; height:34px; border:1px solid #776986; border-radius:50%; color:#fff; background:#473a55; }.player-controls .player-toggle { border:0; background:#b6789c; } #persistent-audio { display:none; } @keyframes idle-bars { 50% { transform:scaleY(.72);opacity:.7; } } @keyframes playing-bars { 50% { transform:scaleY(.28);opacity:.62; } }.lyrics-modal { position:fixed; z-index:40; inset:0; display:grid; place-items:center; padding:22px; background:#211729cc; }.lyrics-modal section { width:min(700px,100%); max-height:min(82vh,820px); padding:25px; border-radius:20px; background:#fcfbfd; box-shadow:0 22px 70px #20172855; }.lyrics-modal header { display:flex; align-items:start; justify-content:space-between; gap:16px; border-bottom:1px solid #e2ddea; }.lyrics-modal h2 { margin-bottom:17px; }.lyrics-modal header button { border:0; color:#5e4b6e; background:transparent; font-size:1.7rem; }.lyrics-modal section>div { max-height:60vh; overflow:auto; padding:19px 3px 0; color:#5b5264; line-height:1.8; white-space:pre-line; }.hidden { display:none!important; }
@media (max-width:760px) { .app-shell { width:min(100% - 24px,1150px); }.topbar,.hero { align-items:flex-start; flex-direction:column; }.topbar { top:6px; }.hero,.catalog-hero { padding:52px 4px 34px; }.flow { width:100%; }.panel { padding:20px; }.panel::before { left:20px; }.compact-heading { align-items:start; flex-wrap:wrap; }.compact-heading .secondary { margin-left:47px; }.form-grid,.catalog-controls,.playlist-controls { grid-template-columns:1fr; }.wide { grid-column:span 1; }.catalog-controls .text-button { margin-bottom:0;text-align:left; }.result-row { align-items:flex-start;flex-wrap:wrap; }.result-row audio { width:100%;max-width:none;margin-left:0; }.admin-preview,.batch-summary { align-items:start;flex-direction:column; }.batch-item { grid-template-columns:30px 1fr;align-items:start; }.batch-item-actions { grid-column:1/-1;justify-content:end; }.genre-row { grid-template-columns:28px 1fr auto auto; }.genre-row .text-button { grid-column:2/-1;justify-self:end; }.stats-summary { grid-template-columns:1fr; }.library-item { grid-template-columns:auto 1fr; }.library-actions { grid-column:1/-1;justify-content:start; }.listener-list { grid-template-columns:1fr; }.playlist-tools { justify-content:start; }.catalog-song { grid-template-columns:76px 1fr;gap:13px; }.catalog-song .artwork { width:76px; }.catalog-song-actions { grid-column:1/-1;justify-content:start; }.detail-hero { grid-template-columns:1fr;gap:22px;padding:22px; }.detail-artwork { max-width:270px; }.detail-tabs,.detail-pane { padding-right:20px;padding-left:20px; }.detail-pane.active { grid-template-columns:1fr; }.detail-hero .download-link { display:block;margin:14px 0 0; }.bottom-player { grid-template-columns:48px minmax(0,1fr);gap:10px;padding:9px 12px; }.player-artwork { width:46px;height:46px; }.player-controls { grid-column:1/-1;justify-content:center; }.public-detail { padding-bottom:140px; }.taxonomy-dialog,.local-dialog { padding:20px; } }
/* Ajuste de acciones de listas */
.playlist-controls .text-button { align-self: end; margin: 0 0 10px; }
.player-song { min-width:0; border:0; padding:0; color:inherit; background:transparent; text-align:left; }.player-song:hover { transform:none; }.player-song strong,.player-song small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.player-song small { margin-top:2px; color:#d0c5da; font-size:.76rem; }
.now-playing { position:fixed; z-index:35; inset:0; display:grid; place-items:center; padding:30px; overflow:auto; color:#fdf9f4; background:radial-gradient(circle at 15% 15%,#6f4d7eaa,transparent 30rem),radial-gradient(circle at 86% 80%,#b4776faa,transparent 32rem),#201b2bd9; backdrop-filter:blur(12px); }.now-close { position:fixed; top:24px; right:28px; width:42px; height:42px; border:1px solid #ffffff42; border-radius:50%; color:#fff; background:#ffffff18; font-size:1.7rem; }.now-playing-inner { display:grid; grid-template-columns:minmax(280px,430px) minmax(300px,470px); align-items:center; gap:clamp(30px,6vw,90px); width:min(1050px,100%); padding:30px 0; }.now-record-stage { position:relative; display:grid; place-items:center; min-height:390px; }.now-cover { position:relative; z-index:2; display:grid; place-items:center; width:min(72vw,335px); aspect-ratio:1; overflow:hidden; border:9px solid #f6eee8; border-radius:18px; color:#fff2ec; background:repeating-radial-gradient(circle,#634675 0 7px,#2d243b 8px 11px); box-shadow:0 20px 45px #130f1d88; font-family:Georgia,serif; font-size:4rem; font-weight:900; }.now-cover img { width:100%; height:100%; object-fit:cover; }.now-vinyl { position:absolute; right:max(-14%, -45px); width:min(72vw,330px); aspect-ratio:1; border-radius:50%; background:radial-gradient(circle at center,#d7a47b 0 5%,#3d2b4b 5.5% 8%,#120f18 8.5% 14%,transparent 14.5%),repeating-radial-gradient(circle at center,#1a1420 0 5px,#302438 6px 8px); box-shadow:0 18px 36px #120d1888,0 0 40px var(--vinyl-glow); }.now-vinyl span { position:absolute; inset:46%; border-radius:50%; background:#d29b78; }.now-playing.is-playing .now-vinyl { animation:vinyl-spin 7s linear infinite; }.now-info { min-width:0; }.now-info .eyebrow { color:#f0b08a; }.now-info h2 { margin-bottom:8px; color:#fffaf5; font-family:Georgia,serif; font-size:clamp(2.4rem,5vw,4.8rem); line-height:.94; letter-spacing:-.06em; }.now-meta { margin-bottom:20px; color:#d7ced8; }.now-visualizer { display:flex; align-items:end; gap:4px; height:50px; margin:22px 0 26px; }.now-visualizer i { width:6px; height:var(--bar); max-height:50px; border-radius:5px; background:linear-gradient(to top,var(--visualizer-colors)); transform-origin:bottom; animation:idle-bars 2.8s ease-in-out infinite; }.now-playing.is-playing .now-visualizer i { animation:playing-bars .85s ease-in-out infinite; }.now-timeline { display:grid; grid-template-columns:42px 1fr 42px; align-items:center; gap:10px; color:#d6cdd8; font-size:.75rem; font-variant-numeric:tabular-nums; }.now-timeline input { width:100%; accent-color:#e5a275; }.now-controls { display:flex; align-items:center; gap:14px; margin:22px 0 28px; }.now-controls button { display:grid; place-items:center; width:43px; height:43px; border:1px solid #ffffff42; border-radius:50%; color:#fff; background:#ffffff17; font-size:1rem; }.now-controls .now-toggle { width:58px; height:58px; border:0; background:linear-gradient(135deg,#df9b72,#a85b7e); box-shadow:0 8px 21px #e08f734d; font-size:1.1rem; }.now-lyrics { padding-top:17px; border-top:1px solid #ffffff2e; }.now-lyrics h3 { margin-bottom:8px; color:#f4e4da; font-family:Georgia,serif; }.now-lyrics div { max-height:150px; overflow:auto; padding-right:8px; color:#d9d0d8; line-height:1.65; white-space:pre-line; } @keyframes vinyl-spin { to { transform:rotate(360deg); } }
@media (max-width:760px) { .now-playing { align-items:start; padding:72px 18px 30px; }.now-close { top:15px; right:16px; }.now-playing-inner { grid-template-columns:1fr; gap:26px; }.now-record-stage { min-height:270px; }.now-cover { width:min(68vw,280px); }.now-vinyl { right:0; width:min(62vw,250px); }.now-info h2 { font-size:clamp(2.4rem,12vw,4rem); }.now-lyrics div { max-height:120px; } }

/* Reproductor especial: tocadiscos contemporáneo y VU del amplificador. */
.now-playing .now-record-stage { min-height:420px; filter:drop-shadow(0 26px 38px #08050d8a); }
.now-playing .now-vinyl { position:relative; right:auto; display:grid; place-items:center; width:min(76vw,405px); overflow:hidden; border:9px solid #121019; background:radial-gradient(circle at center,#d6a079 0 3%,#1f1826 3.4% 8%,#08070c 8.5% 13%,transparent 13.5%),repeating-radial-gradient(circle at center,#100e15 0 4px,#28212e 5px 6px,#121017 7px 8px); box-shadow:inset 0 0 0 2px #ffffff12,0 0 0 1px #ffffff2b,0 22px 48px #08050db5,0 0 58px var(--vinyl-glow); }
.now-playing .now-vinyl::before { content:""; position:absolute; inset:0; border-radius:inherit; background:conic-gradient(from 20deg,transparent 0 7%,#ffffff16 9%,transparent 11% 33%,#ffffff0d 36%,transparent 39% 63%,#ffffff12 67%,transparent 70%); mix-blend-mode:screen; }.now-playing .now-vinyl span { z-index:3; inset:48%; background:#f0bd8e; box-shadow:0 0 0 4px #17111c; }
.now-playing .now-cover { position:relative; z-index:2; width:58%; aspect-ratio:1; border:0; border-radius:50%; box-shadow:0 0 0 4px #17111c,0 0 0 6px #e6ad7b; font-size:3rem; }
.now-playing .now-cover::after { content:""; position:absolute; inset:0; border-radius:50%; box-shadow:inset 0 0 18px #05030952; pointer-events:none; }.now-playing .now-cover img { border-radius:50%; }
.vu-deck { display:flex; align-items:center; gap:12px; width:fit-content; margin:18px 0 23px; padding:12px 15px; border:1px solid #ffffff2e; border-radius:14px; background:linear-gradient(135deg,#0c0b13d9,#35263bdd); box-shadow:inset 0 1px #ffffff16,0 13px 28px #09061045; }
.vu-meter { display:grid; grid-template-columns:auto 82px auto; align-items:center; gap:7px; color:#e6ae83; font-family:ui-monospace,monospace; font-size:.62rem; letter-spacing:.08em; }.vu-meter b { color:#f2dfca; }.vu-meter small { color:#9ca9c8; font-size:.55rem; }
.vu-scale { position:relative; width:82px; height:43px; overflow:hidden; border:1px solid #eac49c77; border-bottom:0; border-radius:82px 82px 0 0; background:repeating-radial-gradient(ellipse at bottom,#e3b07f0f 0 8px,transparent 9px 12px),linear-gradient(180deg,#f6d9aa,#c7896f); box-shadow:inset 0 0 16px #7d3e453d; }.vu-scale::before { content:""; position:absolute; inset:7px 8px 0; border-top:1px solid #6e394b; border-radius:50% 50% 0 0; opacity:.55; }.vu-scale::after { content:"-20     -7      0      +3"; position:absolute; inset:23px 5px auto; color:#633343; font:5px ui-monospace,monospace; letter-spacing:-.5px; white-space:pre; }
.vu-scale i { position:absolute; z-index:2; left:50%; bottom:-1px; width:2px; height:36px; border-radius:4px; background:linear-gradient(to top,#6d263a,#ff7763); box-shadow:0 0 5px #ff9d72; transform-origin:bottom center; transform:rotate(var(--needle-angle,-45deg)); transition:transform 55ms linear; }.vu-hub { position:absolute; z-index:3; left:calc(50% - 4px); bottom:-4px; width:8px; height:8px; border-radius:50%; background:#6d263a; box-shadow:0 0 0 2px #edba89; }
.now-playing .now-timeline { margin-top:2px; }
@media (max-width:760px) { .now-playing .now-record-stage { min-height:300px; }.now-playing .now-vinyl { width:min(75vw,315px); }.vu-deck { margin:15px 0 20px; } }
.mobile-preview-toggle { margin:0; white-space:nowrap; }
#catalog-view.mobile-preview { width:min(430px,calc(100% - 28px)); min-height:calc(100vh - 30px); margin:15px auto; padding:0 14px 150px; border:10px solid #292336; border-radius:30px; background:#f8f5f1; box-shadow:0 18px 55px #2c1d3a35; }
#catalog-view.mobile-preview .catalog-hero { padding:38px 4px 28px; display:block; }#catalog-view.mobile-preview .mobile-preview-toggle { margin-top:20px; }#catalog-view.mobile-preview .catalog-controls,#catalog-view.mobile-preview .playlist-controls { grid-template-columns:1fr; }#catalog-view.mobile-preview .detail-hero,#catalog-view.mobile-preview .detail-pane.active { grid-template-columns:1fr; }#catalog-view.mobile-preview .catalog-song { grid-template-columns:76px 1fr; }#catalog-view.mobile-preview .catalog-song-actions { grid-column:1/-1; justify-content:start; }#catalog-view.mobile-preview .listener-list { grid-template-columns:1fr; }#catalog-view.mobile-preview .playlist-tools { justify-content:start; }

/* Jerarquía pública: el catálogo musical ocupa el primer plano. */
body { overflow-x:hidden; }
.topbar { padding:9px 12px 9px 16px; }
.topbar nav { align-items:center; flex-wrap:wrap; justify-content:flex-end; background:#e9e3ddb8; }
.nav-action { appearance:none; }
.catalog-hero { min-height:0; padding:42px 20px 27px; }
.catalog-hero::after { top:-118px; width:190px; height:190px; }
.catalog-hero h1 { margin-bottom:10px; font-size:clamp(2.55rem,5vw,4.55rem); }
.catalog-hero .lead { max-width:590px; font-size:.98rem; line-height:1.55; }
.catalog-controls { grid-template-columns:minmax(220px,1.55fr) repeat(3,minmax(130px,1fr)) auto; gap:10px; margin-bottom:10px; padding:13px 15px; border-color:#ffffffb8; border-radius:15px; background:#faf8f3b8; box-shadow:none; }
.catalog-controls input,.catalog-controls select { padding:9px 10px; border-color:#ded5d1; background:#fffefa; }
.catalog-controls .text-button { margin-bottom:8px; }
.catalog-utilities { display:flex; justify-content:flex-end; min-height:22px; margin-bottom:4px; }
.mobile-preview-toggle { border:0; padding:2px 0; color:#887d86; background:transparent; font-size:.7rem; text-decoration:underline; text-underline-offset:3px; }
.is-detail>.catalog-overview { display:none; }
.local-note { margin:6px 0 13px; border:0; padding:0; background:transparent; }

.playlist-backdrop { position:fixed; z-index:24; inset:0; width:100%; border:0; background:#241a2b73; backdrop-filter:blur(3px); }
.listener-list { position:fixed; z-index:30; top:0; right:0; bottom:0; display:flex; flex-direction:column; gap:19px; width:min(520px,calc(100vw - 28px)); margin:0; padding:25px 25px 120px; overflow:auto; border:0; border-left:1px solid #fff; border-radius:24px 0 0 24px; background:#fbf8f3f7; box-shadow:-20px 0 55px #261c3033; transform:translateX(105%); transition:transform .22s ease; }
.listener-list.is-open { transform:translateX(0); }
.playlist-panel-open { overflow:hidden; }
.playlist-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; }
.playlist-heading h2 { margin:0; font-size:1.65rem; }
.playlist-close { display:grid; flex:0 0 38px; place-items:center; width:38px; height:38px; border:1px solid #ded2d6; border-radius:50%; color:#59445f; background:#fffdfa; font-size:1.45rem; }
.playlist-tools { justify-content:flex-start; }
.playlist-tools .secondary { color:#fff; background:#76506f; }
.playlist-controls { grid-template-columns:1fr auto; }
.playlist-controls label { grid-column:1/-1; }
.queue-items { padding-top:4px; border-top:1px solid #e5dad8; }

.song-grid { gap:18px; }
.catalog-song { grid-template-columns:132px minmax(0,1fr); align-items:center; gap:13px 25px; padding:20px; border-color:#ffffff9c; border-radius:18px; background:#fcfaf6bd; box-shadow:0 9px 22px #3c2d430d; }
.catalog-song:hover { transform:translateY(-2px); box-shadow:0 13px 27px #3c2d4318; }
.catalog-song .artwork { grid-row:1/3; width:132px; }
.catalog-song-copy { min-width:0; align-self:end; }
.catalog-song-copy .eyebrow { margin-bottom:6px; }
.song-title { display:block; max-width:100%; overflow:hidden; border:0; padding:0; color:#332541; background:transparent; font-family:Georgia,serif; font-size:1.65rem; font-weight:700; line-height:1.12; text-align:left; text-overflow:ellipsis; white-space:nowrap; }
.song-title:hover { color:#85506d; text-decoration:underline; text-underline-offset:4px; }
.catalog-song p:not(.eyebrow) { margin:6px 0 9px; }
.tag-list { gap:6px; }
.tag-list span { border:0; padding:4px 8px; background:#eee7e2b8; }
.catalog-song-actions { grid-column:2; align-self:start; justify-content:flex-start; }
.catalog-song-actions .primary { margin:0; padding:10px 17px; }
.catalog-song-actions .icon-action { border-color:transparent; padding:9px 10px; background:transparent; }
.catalog-song-actions .icon-action:hover { background:#eee5e8; }
.catalog-song-actions .icon-action.selected { color:#8e496c; background:#ead8e0; }
.catalog-song-actions .secondary { border:0; padding:9px 10px; color:#776b76; background:transparent; font-size:.82rem; }

.public-detail { padding-top:7px; }
.back-catalog { margin:8px 0 17px; }
.detail-hero { grid-template-columns:minmax(210px,315px) minmax(0,1fr); gap:44px; padding:26px 30px 34px; border:0; border-radius:24px 24px 0 0; background:#fbf9f5c7; box-shadow:none; }
.detail-hero h1 { margin-bottom:10px; font-size:clamp(2.65rem,5.4vw,4.85rem); }
.detail-hero .lead { color:#6b616c; }
.detail-hero .tag-list { margin-top:15px; }
.listener-actions { margin-top:24px; }
.listener-actions .icon-action { border-color:transparent; background:#eee7e4; }
.listener-actions .icon-action.selected { color:#fff; background:#a85e80; }
.detail-tabs { padding:0 30px; background:#fbf9f5c7; }
.detail-pane { padding:28px 30px 32px; border:0; background:#fbf9f5c7; box-shadow:none; }
.detail-pane.active { gap:34px; }
.detail-pane article,.lyrics-scroll { padding:3px 0 3px 17px; border:0; border-left:3px solid #d8b5bd; border-radius:0; background:transparent; }
.detail-pane h2 { margin-bottom:12px; }
.scroll-copy { max-height:280px; }
.lyrics-scroll { max-height:360px; }

@media (max-width:760px) {
  .app-shell { width:min(100% - 22px,1150px); padding-top:10px; }
  .topbar { position:relative; top:0; gap:9px; padding:10px 11px; }
  .topbar nav { width:100%; justify-content:flex-start; gap:2px; padding:3px; }
  .nav-link { padding:8px 9px; font-size:.76rem; }
  .catalog-hero { padding:34px 4px 23px; }
  .catalog-hero h1 { font-size:clamp(2.45rem,13vw,3.6rem); }
  .catalog-controls { grid-template-columns:1fr; padding:13px; }
  .catalog-controls .text-button { margin-bottom:0; padding:4px 0; }
  .catalog-utilities { display:none; }
  .listener-list { width:min(100%,430px); padding:22px 18px 115px; border-radius:0; }
  .playlist-controls { grid-template-columns:1fr auto; }
  .catalog-song { grid-template-columns:92px minmax(0,1fr); gap:13px 16px; padding:15px; }
  .catalog-song .artwork { grid-row:auto; width:92px; }
  .song-title { white-space:normal; font-size:1.4rem; }
  .catalog-song .tag-list { display:none; }
  .catalog-song-actions { grid-column:1/-1; }
  .catalog-song-actions .primary { flex:1; }
  .detail-hero { grid-template-columns:1fr; gap:25px; padding:17px 16px 27px; }
  .detail-artwork { width:min(100%,310px); max-width:none; margin:auto; }
  .detail-tabs,.detail-pane { padding-right:16px; padding-left:16px; }
  .detail-pane.active { grid-template-columns:1fr; gap:26px; }
  .listener-actions { gap:7px; }
  .listener-actions .primary { flex-basis:100%; }
}