/*
    Archivo: assets/css/style.css
    Versión: 1.0.2
    Fecha: 2026-06-09 16:55 hrs.
    Descripción: Diseño móvil vertical compacto, glassmorphism sin bordes, mini reproductor fijo y fondos degradados.
*/
:root{--bg0:#050816;--bg1:#123bff;--bg2:#12d6c5;--bg3:#ff3f7f;--text:#fff;--soft:rgba(255,255,255,.68);--panel:rgba(255,255,255,.13);--panel2:rgba(255,255,255,.2);--shadow:0 18px 60px rgba(0,0,0,.28);--headerH:72px;--navH:68px;--miniH:62px}*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;color:var(--text);background:#050816}button,input,select{font:inherit;border:0;outline:0}button{cursor:pointer;color:inherit}input,select{appearance:none}button,input,select,a{-webkit-tap-highlight-color:transparent}.ambient-bg{position:fixed;inset:0;z-index:-2;background:radial-gradient(circle at 12% 8%,var(--bg1),transparent 33%),radial-gradient(circle at 88% 24%,var(--bg3),transparent 33%),radial-gradient(circle at 44% 92%,var(--bg2),transparent 42%),linear-gradient(145deg,#020617,#07112f 60%,#050816);filter:saturate(1.2);transition:background .55s ease}.ambient-bg:after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.1),transparent 36%,rgba(255,255,255,.06));backdrop-filter:blur(1px);animation:drift 14s ease-in-out infinite alternate}@keyframes drift{from{transform:translate3d(-1.5%,1%,0) scale(1)}to{transform:translate3d(1.5%,-1%,0) scale(1.04)}}
.app-shell{width:100%;max-width:480px;height:100dvh;margin:0 auto;position:relative;overflow:hidden}.app-header{position:fixed;top:0;left:50%;transform:translateX(-50%);width:100%;max-width:480px;height:var(--headerH);z-index:30;padding:10px 14px;background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.08));backdrop-filter:blur(24px);box-shadow:0 18px 50px rgba(0,0,0,.24);border-bottom-left-radius:24px;border-bottom-right-radius:24px}.brand-row{height:52px;display:flex;align-items:center;gap:10px}.brand-logo{width:46px;height:46px;border-radius:16px;display:grid;place-items:center;font-size:22px;background:linear-gradient(145deg,var(--bg1),var(--bg2));box-shadow:0 12px 30px rgba(0,0,0,.28)}.brand-copy{min-width:0;display:grid;gap:1px}.brand-copy strong{font-size:18px;letter-spacing:-.04em}.brand-copy span{font-size:11px;color:var(--soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.app-main{position:absolute;top:calc(var(--headerH) + 10px);left:0;right:0;bottom:calc(var(--navH) + var(--miniH) + 12px);padding:0 10px;overflow:hidden}.view{display:none;height:100%;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;padding-bottom:8px;animation:viewIn .18s ease both}.view::-webkit-scrollbar{display:none}.view.is-active{display:block}@keyframes viewIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}h1,h2,p{margin:0}h1{font-size:25px;line-height:.95;letter-spacing:-.06em}h2{font-size:15px;letter-spacing:-.04em}p{line-height:1.28;color:var(--soft);font-size:12px}.section-title{display:flex;align-items:center;gap:10px;margin:0 0 10px}.section-title>i{width:38px;height:38px;border-radius:14px;background:var(--panel);display:grid;place-items:center;font-size:18px;box-shadow:0 12px 34px rgba(0,0,0,.18)}.section-head{display:flex;align-items:center;justify-content:space-between;margin:10px 2px 8px}.section-head.flat{margin:0 0 7px}.section-head span{font-size:12px;color:var(--soft);font-weight:800;font-variant-numeric:tabular-nums}.hero-card,.timeline-panel,.glass-form,.youtube-player-card,.mini-card{background:linear-gradient(145deg,rgba(255,255,255,.18),rgba(255,255,255,.08));backdrop-filter:blur(24px);border-radius:24px;box-shadow:var(--shadow);padding:14px;margin-bottom:10px}.compact-hero{min-height:128px;display:flex;flex-direction:column;justify-content:flex-end;position:relative;overflow:hidden}.compact-hero:before{content:"";position:absolute;width:135px;height:135px;right:-48px;top:-42px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.26),transparent 68%)}.compact-hero>*{position:relative}.eyebrow{display:inline-flex;width:max-content;gap:7px;align-items:center;background:rgba(255,255,255,.15);padding:7px 10px;border-radius:999px;font-size:10px;text-transform:uppercase;letter-spacing:.12em;font-weight:900;margin-bottom:9px}.compact-hero h1{font-size:34px;max-width:280px}.hero-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.soft-btn,.mini-btn{min-height:38px;border-radius:999px;background:var(--panel);display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:0 13px;font-size:12px;font-weight:900;box-shadow:0 12px 28px rgba(0,0,0,.16);transition:transform .14s ease,background .14s ease}.soft-btn:active,.mini-btn:active,.nav-btn:active,.mini-control:active{transform:scale(.95)}.soft-btn.primary{background:linear-gradient(135deg,var(--bg1),var(--bg2))}.mini-btn{width:38px;padding:0}.search-row{height:44px;border-radius:18px;background:var(--panel);backdrop-filter:blur(18px);display:flex;align-items:center;gap:8px;padding:0 11px;margin-bottom:9px;box-shadow:0 12px 30px rgba(0,0,0,.14)}.search-row input{flex:1;min-width:0;background:transparent;color:#fff;font-size:13px}.search-row input::placeholder{color:rgba(255,255,255,.5)}.search-row button{width:34px;height:34px;border-radius:14px;background:rgba(255,255,255,.12);display:grid;place-items:center}.chip-row{display:flex;gap:7px;overflow:auto;padding:0 0 8px;scrollbar-width:none}.chip-row::-webkit-scrollbar{display:none}.chip{white-space:nowrap;background:rgba(255,255,255,.12);border-radius:999px;padding:7px 10px;font-size:11px;font-weight:900;color:#fff}.chip.is-active{background:rgba(255,255,255,.26)}.compact-list,.sound-grid,.sound-stack,.pack-list,.yt-list{display:grid;gap:8px}.sound-card,.mix-card,.pack-card,.yt-card{background:rgba(255,255,255,.11);backdrop-filter:blur(18px);border-radius:20px;padding:10px;box-shadow:0 12px 34px rgba(0,0,0,.16);position:relative;overflow:hidden}.sound-card:before,.mix-card:before,.pack-card:before,.yt-card:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 92% 0,var(--card-color,rgba(255,255,255,.22)),transparent 36%);opacity:.72;pointer-events:none}.sound-card>*,.mix-card>*,.pack-card>*,.yt-card>*{position:relative}.sound-top,.mix-top,.pack-top,.yt-top{display:flex;align-items:center;gap:9px}.sound-icon{width:45px;height:45px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(145deg,var(--card-color,#38bdf8),rgba(255,255,255,.14));box-shadow:0 12px 24px rgba(0,0,0,.2);font-size:20px;flex:0 0 auto}.sound-info,.pack-info,.yt-info{min-width:0;flex:1}.sound-info strong,.pack-info strong,.yt-info strong{display:block;font-size:14px;line-height:1.08;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sound-info span,.pack-info span,.yt-info span{display:block;font-size:10px;color:var(--soft);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.card-actions{display:flex;gap:7px;margin-top:8px;flex-wrap:wrap}.icon-btn{width:34px;height:34px;border-radius:13px;background:rgba(255,255,255,.14);display:grid;place-items:center;color:#fff;flex:0 0 auto}.icon-btn.is-hot{background:linear-gradient(145deg,#f59e0b,#ef4444)}.empty-state{display:none;padding:14px;border-radius:18px;background:rgba(255,255,255,.1);color:var(--soft);font-size:12px;font-weight:800;line-height:1.25}.empty-state.show{display:block}.field{display:grid;gap:6px;margin-bottom:9px}.field span{font-size:10px;text-transform:uppercase;letter-spacing:.1em;font-weight:900;color:var(--soft)}.field input,.field select{width:100%;min-height:42px;border-radius:16px;background:rgba(255,255,255,.13);padding:0 12px;color:#fff}.field select option{color:#020617}.field input[type=color]{padding:5px}.field.compact input{min-height:38px}.two-cols{display:grid;grid-template-columns:1fr 1fr;gap:8px}.file-drop{display:grid;place-items:center;text-align:center;gap:4px;background:rgba(255,255,255,.12);border-radius:22px;min-height:104px;margin-bottom:9px}.file-drop i{font-size:28px}.file-drop strong{font-size:17px}.file-drop span,.note{font-size:10px;color:var(--soft)}.note{margin-top:8px}.record-actions{margin-top:-2px;margin-bottom:8px}.record-preview{display:none;width:100%;margin:0 0 9px;border-radius:16px;background:rgba(255,255,255,.12)}.record-preview.show{display:block}.timeline-tracks{display:grid;gap:8px;max-height:210px;overflow:auto;scrollbar-width:none}.timeline-tracks::-webkit-scrollbar{display:none}.timeline-card{background:rgba(255,255,255,.1);border-radius:18px;padding:9px}.timeline-card strong{display:flex;align-items:center;gap:7px;margin-bottom:7px;font-size:13px}.range-row{display:grid;grid-template-columns:58px 1fr 36px;gap:6px;align-items:center;margin:5px 0}.range-row span{font-size:10px;color:var(--soft);font-weight:800}.range-row input[type=range]{width:100%;accent-color:#fff}.range-row output{text-align:right;font-size:10px;color:#fff;font-variant-numeric:tabular-nums}.progress-line{height:6px;background:rgba(255,255,255,.12);border-radius:999px;overflow:hidden;margin-top:8px}.progress-line div{height:100%;width:0;background:linear-gradient(90deg,#fff,rgba(255,255,255,.38));border-radius:999px}.yt-list-bar{display:flex;gap:8px;align-items:center;margin-bottom:8px}.yt-list-tabs{display:flex;gap:7px;overflow:auto;scrollbar-width:none;flex:1}.yt-list-tabs::-webkit-scrollbar{display:none}.yt-tab{min-height:36px;white-space:nowrap;padding:0 12px;border-radius:999px;background:rgba(255,255,255,.12);font-size:11px;font-weight:900;color:#fff}.yt-tab.is-active{background:rgba(255,255,255,.28)}.youtube-player-card{padding:10px}.yt-video-shell{overflow:hidden;max-height:180px;opacity:1;transition:max-height .18s ease,opacity .18s ease;margin-bottom:8px}.yt-video-shell.is-hidden{max-height:0;opacity:0;margin-bottom:0;pointer-events:none}.youtube-player-card iframe,.yt-video-shell iframe{width:100%;aspect-ratio:16/9;border-radius:18px;display:block;background:#050816}.yt-now{display:flex;gap:7px;align-items:center;color:var(--soft);font-size:12px;min-height:18px}.yt-main-controls{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:8px}.yt-main-controls .soft-btn{padding:0}.yt-volume-row{display:grid;grid-template-columns:18px 1fr;gap:8px;align-items:center;margin-top:8px;color:var(--soft)}.yt-volume-row input{accent-color:#fff}.yt-thumb{width:58px;height:42px;border-radius:13px;display:grid;place-items:center;background-size:cover;background-position:center;background-color:rgba(255,255,255,.12);box-shadow:0 10px 22px rgba(0,0,0,.18);flex:0 0 auto}.yt-card-actions{display:flex;gap:6px}.gradient-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.gradient-btn{height:48px;border-radius:18px;background:linear-gradient(135deg,var(--a),var(--b),var(--c));box-shadow:0 12px 30px rgba(0,0,0,.18);font-size:11px;font-weight:900;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.4)}.gradient-btn.is-active{box-shadow:0 0 0 2px rgba(255,255,255,.35),0 12px 30px rgba(0,0,0,.18)}.mini-player{position:fixed;left:50%;bottom:calc(var(--navH) + env(safe-area-inset-bottom) + 6px);transform:translateX(-50%);width:min(480px,100%);height:var(--miniH);z-index:40;display:grid;grid-template-columns:44px minmax(0,1fr) 32px 36px 32px 72px;gap:6px;align-items:center;padding:8px 10px;background:linear-gradient(180deg,rgba(10,14,30,.72),rgba(255,255,255,.11));backdrop-filter:blur(24px);box-shadow:0 -18px 45px rgba(0,0,0,.28)}.mini-cover{width:44px;height:44px;border-radius:15px;background:rgba(255,255,255,.14);background-size:cover;background-position:center;display:grid;place-items:center;box-shadow:0 10px 24px rgba(0,0,0,.2)}.mini-meta{min-width:0;display:grid;gap:1px}.mini-meta strong{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mini-meta span{font-size:10px;color:var(--soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mini-control{width:32px;height:32px;border-radius:13px;background:rgba(255,255,255,.13);display:grid;place-items:center}.mini-control.main{width:36px;height:36px;background:rgba(255,255,255,.24)}.mini-player input[type=range]{width:72px;accent-color:#fff}.bottom-nav{position:fixed;left:50%;bottom:0;transform:translateX(-50%);width:100%;max-width:480px;height:var(--navH);z-index:45;display:grid;grid-template-columns:repeat(6,1fr);gap:2px;padding:7px 7px calc(7px + env(safe-area-inset-bottom));background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.17));backdrop-filter:blur(24px);box-shadow:0 -18px 50px rgba(0,0,0,.24);border-top-left-radius:22px;border-top-right-radius:22px}.nav-btn{min-height:50px;border-radius:17px;color:rgba(255,255,255,.72);display:grid;place-items:center;gap:1px;font-size:16px;font-weight:900;background:transparent}.nav-btn span{font-size:9px}.nav-btn.is-active{background:rgba(255,255,255,.18);color:#fff;box-shadow:0 10px 25px rgba(0,0,0,.16)}.toast{position:fixed;left:50%;bottom:calc(var(--navH) + var(--miniH) + 12px);transform:translateX(-50%) translateY(18px);width:min(420px,calc(100% - 28px));padding:12px 14px;border-radius:18px;background:rgba(8,13,30,.82);backdrop-filter:blur(22px);box-shadow:0 18px 55px rgba(0,0,0,.35);z-index:80;opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease;font-size:12px;font-weight:800}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media (min-width:700px){.app-shell,.app-header,.bottom-nav,.mini-player{max-width:430px}.app-shell{box-shadow:0 0 0 999px rgba(0,0,0,.18)}}