/* MX — sistema visual. Todo el aspecto se controla con variables que escribe js/theme.js (Studio). */
:root {
  --accent: #2f6bff; --accent-2: #8b5cf6; --accent-3: #22d3ee;
  --accent-rgb: 47 107 255; --accent-2-rgb: 139 92 246; --accent-3-rgb: 34 211 238; --text-rgb: 244 247 255;
  --bg: #05060d; --text: #f4f7ff; --font: -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --radius: 22px; --blur: 24px; --glass-a: 0.2; --glow: 0.6; --stroke: 1.8; --angle: 135deg; --blob-dur: 22s; --motion: .6;
  --dim: rgb(var(--text-rgb) / .62); --line: rgb(var(--text-rgb) / .12);
  --tab-h: 58px; --mini-h: 62px;
  --sat: env(safe-area-inset-top); --sab: env(safe-area-inset-bottom);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { background: var(--bg); color-scheme: dark; -webkit-text-size-adjust: 100%; }
html, body { overflow-x: clip; }
body { margin: 0; font-family: var(--font); color: var(--text); background: transparent; min-height: 100dvh; overscroll-behavior-y: none; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; text-align: left; }
a { color: var(--accent-3); text-decoration: none; }
h1, h2, h3, p { margin: 0; }
small { color: var(--dim); }
.ic { stroke-width: var(--stroke); flex: none; }

/* ---------- Fondo ---------- */
#bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: var(--bg); }
.blob { position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%; filter: blur(70px); opacity: .5; will-change: transform; }
.b1 { background: radial-gradient(circle, var(--accent), transparent 65%); top: -25vmax; left: -20vmax; animation: drift1 var(--blob-dur) ease-in-out infinite alternate; }
.b2 { background: radial-gradient(circle, var(--accent-2), transparent 65%); bottom: -30vmax; right: -25vmax; animation: drift2 calc(var(--blob-dur) * 1.3) ease-in-out infinite alternate; }
.b3 { background: radial-gradient(circle, var(--accent-3), transparent 65%); top: 30vh; left: 30vw; width: 40vmax; height: 40vmax; opacity: .22; animation: drift1 calc(var(--blob-dur) * .8) ease-in-out infinite alternate-reverse; }
@keyframes drift1 { to { transform: translate3d(calc(18vw * var(--motion) + 4vw), calc(12vh * var(--motion) + 3vh), 0) scale(1.1); } }
@keyframes drift2 { to { transform: translate3d(calc(-16vw * var(--motion) - 3vw), calc(-14vh * var(--motion) - 3vh), 0) scale(1.15); } }
html[data-motion="off"] .blob, html[data-motion="off"] .pv-orbs { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .blob, .pv-orbs { animation: none !important; } * { transition-duration: .01ms !important; } }
html[data-bg="solid"] .blob { display: none; }
html[data-bg="grid"] .blob { opacity: .22; }
html[data-bg="grid"] #bg::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgb(var(--accent-3-rgb) / .09) 1px, transparent 1px), linear-gradient(90deg, rgb(var(--accent-3-rgb) / .09) 1px, transparent 1px); background-size: 38px 38px; mask-image: radial-gradient(ellipse at 50% 30%, #000 20%, transparent 75%); }
html[data-bg="mesh"] #bg { background: radial-gradient(at 15% 10%, rgb(var(--accent-rgb) / .35), transparent 45%), radial-gradient(at 90% 20%, rgb(var(--accent-2-rgb) / .35), transparent 45%), radial-gradient(at 40% 100%, rgb(var(--accent-3-rgb) / .25), transparent 50%), var(--bg); background-size: 140% 140%; animation: meshmove calc(var(--blob-dur) * 1.5) ease-in-out infinite alternate; }
html[data-bg="mesh"] .blob { display: none; }
@keyframes meshmove { to { background-position: 30% 20%, 70% 30%, 50% 70%, 0 0; } }

/* ---------- Estructura ---------- */
#topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: .4rem; padding: calc(var(--sat) + .55rem) .8rem .55rem; background: linear-gradient(var(--bg) 40%, transparent); }
.brand { font-weight: 800; letter-spacing: .14em; font-size: .95rem; background: linear-gradient(var(--angle), var(--accent-3), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .2rem; }
#gsearch { flex: 1; position: relative; min-width: 0; }
#gsearch .s-ic { position: absolute; left: .8rem; top: 50%; transform: translateY(-50%); color: var(--dim); display: flex; pointer-events: none; }
#gsearch input { width: 100%; height: 42px; padding: 0 .9rem 0 2.4rem; border-radius: 999px; border: 1px solid var(--line); background: rgb(var(--text-rgb) / var(--glass-a)); backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur)); outline: none; font-size: 16px; }
#gsearch input:focus { border-color: var(--accent-3); box-shadow: 0 0 calc(18px * var(--glow)) rgb(var(--accent-3-rgb) / .35); }
#main { padding: .2rem 1rem calc(var(--tab-h) + var(--sab) + 2rem); max-width: 760px; margin: 0 auto; }
body.has-mini #main { padding-bottom: calc(var(--tab-h) + var(--mini-h) + var(--sab) + 2rem); }
.view-head { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; margin: .4rem 0 .9rem; flex-wrap: wrap; }
.view-head h1 { font-size: 1.9rem; letter-spacing: -.02em; }
.back { display: inline-flex; align-items: center; gap: .2rem; color: var(--dim); margin: .4rem 0 .8rem; font-size: .9rem; }
.back .ic { transform: rotate(180deg); }
.section { margin: 1.4rem 0; }
.section-h { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: .6rem; }
.section-h h2 { font-size: 1.12rem; letter-spacing: -.01em; }
.more { font-size: .85rem; }
.hint { color: var(--dim); font-size: .85rem; line-height: 1.45; margin: .4rem 0; }
.hint code { background: rgb(var(--text-rgb) / .1); padding: .05rem .3rem; border-radius: 6px; }
.sub { font-size: .85rem; color: var(--dim); font-weight: 600; margin: .9rem 0 .4rem; }

/* ---------- Superficies (estilo de tarjeta) ---------- */
.glass, .tile, .stat-tile, .provider-card, .notice, .preset, .home-item, .table, .checklist, .quick .tile {
  background: rgb(var(--text-rgb) / var(--glass-a)); border: 1px solid var(--line); border-radius: var(--radius);
  backdrop-filter: blur(var(--blur)) saturate(140%); -webkit-backdrop-filter: blur(var(--blur)) saturate(140%);
}
html[data-card="flat"] :is(.tile, .stat-tile, .provider-card, .notice, .preset, .home-item, .table, .checklist) { backdrop-filter: none; -webkit-backdrop-filter: none; border-color: transparent; background: rgb(var(--text-rgb) / .07); }
html[data-card="outline"] :is(.tile, .stat-tile, .provider-card, .notice, .preset, .home-item, .table, .checklist) { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-color: rgb(var(--accent-rgb) / .6); }
html[data-card="neon"] :is(.tile, .stat-tile, .provider-card, .notice, .preset, .home-item, .table, .checklist) { border-color: rgb(var(--accent-3-rgb) / .8); box-shadow: 0 0 calc(16px * var(--glow)) rgb(var(--accent-3-rgb) / .35), inset 0 0 calc(10px * var(--glow)) rgb(var(--accent-3-rgb) / .12); }
.notice { padding: .75rem .9rem; font-size: .88rem; line-height: 1.45; margin: .6rem 0; }
.n-warn { border-color: rgb(255 180 60 / .55); } .n-info { border-color: rgb(var(--accent-3-rgb) / .45); }

/* ---------- Portadas, tarjetas, filas ---------- */
.art { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: calc(var(--radius) * .6); background: rgb(var(--text-rgb) / .08); }
.art.ph { display: grid; place-items: center; color: var(--dim); }
.art.round { border-radius: 50%; }
.hscroll { display: flex; gap: .8rem; overflow-x: auto; padding: .2rem .1rem .6rem; scroll-snap-type: x proximity; scroll-padding-inline: 1rem; scrollbar-width: none; margin: 0 -1rem; padding-inline: 1rem; }
.hscroll::-webkit-scrollbar { display: none; }
.card { flex: none; width: 138px; display: flex; flex-direction: column; gap: .15rem; scroll-snap-align: start; }
.card b { font-size: .88rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: .4rem; }
.card small { font-size: .76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-art { position: relative; display: block; width: 138px; height: 138px; border-radius: calc(var(--radius) * .6); overflow: hidden; transition: transform .25s; }
.card:active .card-art { transform: scale(.96); }
html[data-card="neon"] .card-art { box-shadow: 0 0 calc(18px * var(--glow)) rgb(var(--accent-rgb) / .55); }
html[data-card="outline"] .card-art { outline: 1px solid rgb(var(--accent-rgb) / .6); }
.card.round .card-art, .card.round .art { border-radius: 50%; }
.card-play { position: absolute; right: 8px; bottom: 8px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(var(--angle), var(--accent), var(--accent-2)); box-shadow: 0 4px 14px rgb(0 0 0 / .4); opacity: 0; transform: translateY(6px); transition: .2s; }
@media (hover: hover) { .card:hover .card-play { opacity: 1; transform: none; } }
.card.add .art { border: 1.5px dashed var(--line); }
.art.sm { width: 52px; height: 52px; border-radius: calc(var(--radius) * .4); flex: none; }
.art.xs { width: 44px; height: 44px; border-radius: 10px; flex: none; }
.art.lg { width: 120px; height: 120px; }

.row { display: flex; align-items: center; gap: .1rem; border-radius: calc(var(--radius) * .6); }
.row.current { background: rgb(var(--accent-rgb) / .16); box-shadow: inset 0 0 0 1px rgb(var(--accent-rgb) / .4); }
.row-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: .75rem; padding: .5rem .4rem; min-height: 64px; }
.row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .12rem; }
.row-text b { font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-text small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .8rem; }
.dur, .size { font-size: .78rem; color: var(--dim); font-variant-numeric: tabular-nums; }
.badges { display: flex; flex-wrap: wrap; gap: .25rem; }
.badge { font-size: .64rem; padding: .1rem .42rem; border-radius: 999px; border: 1px solid var(--line); color: var(--dim); white-space: nowrap; letter-spacing: .01em; }
.b-offline, .b-ok { color: #4ade80; border-color: rgb(74 222 128 / .5); } .b-embed { color: #fbbf24; border-color: rgb(251 191 36 / .5); }
.b-direct { color: var(--accent-3); border-color: rgb(var(--accent-3-rgb) / .45); } .b-dl { color: var(--accent-2); border-color: rgb(var(--accent-2-rgb) / .5); }
.b-warn { color: #fb923c; border-color: rgb(251 146 60 / .5); } .b-info { color: var(--accent-3); }
.pl-row { width: 100%; }
.reorder { display: flex; }

.icon-btn { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: var(--text); flex: none; transition: transform .15s, color .2s; }
.icon-btn:active { transform: scale(.88); }
.icon-btn.sm { width: 36px; height: 36px; }
.icon-btn.lg { width: 56px; height: 56px; }
.icon-btn.on, .icon-btn.fav.on { color: var(--accent-3); }
.icon-btn.fav.on { color: #ff4d8d; filter: drop-shadow(0 0 calc(8px * var(--glow)) #ff4d8d88); }
.icon-btn:disabled { opacity: .25; }

/* ---------- Botones (estilo) ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 46px; padding: 0 1.2rem; border-radius: 999px; font-weight: 600; border: 1px solid var(--line); background: rgb(var(--text-rgb) / .08); text-align: center; transition: transform .15s; }
.btn:active { transform: scale(.96); }
.btn.primary { border: 0; color: #fff; background: linear-gradient(var(--angle), var(--accent), var(--accent-2)); box-shadow: 0 6px calc(22px * var(--glow)) rgb(var(--accent-rgb) / .45); }
.btn.ghost { background: transparent; }
.btn.danger { color: #ff6b6b; } .btn.primary.danger { color: #fff; background: #d13a3a; box-shadow: none; }
.btn.wide { width: 100%; }
html[data-btn="round"] .btn { border-radius: 16px; } html[data-btn="square"] .btn, html[data-btn="square"] .chip, html[data-btn="square"] .tab, html[data-btn="square"] .mode { border-radius: 6px; }
html[data-btn="neon"] .btn.primary { background: transparent; border: 1.5px solid var(--accent-3); color: var(--accent-3); box-shadow: 0 0 calc(18px * var(--glow)) rgb(var(--accent-3-rgb) / .6), inset 0 0 calc(10px * var(--glow)) rgb(var(--accent-3-rgb) / .25); }
.btn-row { display: flex; gap: .6rem; flex-wrap: wrap; margin: .8rem 0; align-items: center; }
.chips { display: flex; gap: .45rem; flex-wrap: wrap; margin: .5rem 0; }
.chips.big .chip { flex: 1; min-height: 52px; justify-content: center; }
.chip { display: inline-flex; align-items: center; gap: .35rem; min-height: 38px; padding: 0 .9rem; border-radius: 999px; border: 1px solid var(--line); background: rgb(var(--text-rgb) / .06); font-size: .85rem; color: var(--text); }
.chip.on { border-color: var(--accent-3); color: var(--accent-3); background: rgb(var(--accent-3-rgb) / .12); }
.tabs { display: flex; gap: .3rem; padding: .25rem; border-radius: 999px; background: rgb(var(--text-rgb) / .06); margin: .4rem 0 .8rem; overflow-x: auto; scrollbar-width: none; }
.tab { flex: 1; min-height: 38px; padding: 0 .9rem; border-radius: 999px; font-size: .88rem; text-align: center; color: var(--dim); white-space: nowrap; }
.tab.on { background: linear-gradient(var(--angle), var(--accent), var(--accent-2)); color: #fff; }
.input { width: 100%; min-height: 46px; padding: .6rem .9rem; border-radius: calc(var(--radius) * .6); border: 1px solid var(--line); background: rgb(var(--text-rgb) / .06); outline: none; font-size: 16px; }
.input:focus { border-color: var(--accent-3); }
textarea.input { resize: vertical; } .mono { font-family: ui-monospace, Menlo, monospace; font-size: 13px; }
.field { display: flex; flex-direction: column; gap: .3rem; margin: .6rem 0; font-size: .85rem; color: var(--dim); }
.empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .5rem; padding: 2.5rem 1rem; color: var(--dim); }
.empty h3 { color: var(--text); font-size: 1.05rem; } .empty p { max-width: 34ch; font-size: .88rem; line-height: 1.45; }
.skeleton { display: grid; gap: .6rem; } .sk { height: 56px; border-radius: 14px; background: linear-gradient(90deg, rgb(var(--text-rgb) / .05), rgb(var(--text-rgb) / .12), rgb(var(--text-rgb) / .05)); background-size: 200% 100%; animation: sk 1.3s linear infinite; }
@keyframes sk { to { background-position: -200% 0; } }

/* ---------- Inicio ---------- */
.quick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.tile { display: flex; align-items: center; gap: .7rem; padding: .85rem; min-height: 68px; min-width: 0; }
.tile .ic { color: var(--accent-3); }
.tile span { display: flex; flex-direction: column; min-width: 0; overflow: hidden; } .tile b { font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tile small { font-size: .74rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: .7rem; margin: .6rem 0; }
.stat-tile { display: flex; flex-direction: column; padding: .9rem; color: var(--text); }
.stat-tile b { font-size: 1.35rem; letter-spacing: -.02em; background: linear-gradient(var(--angle), var(--accent-3), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.detail-head { display: flex; gap: 1rem; align-items: center; margin-bottom: .6rem; } .detail-head h1 { font-size: 1.5rem; line-height: 1.15; } .detail-head small { line-height: 1.5; }

/* ---------- Estadísticas ---------- */
.bars { display: flex; align-items: flex-end; gap: 4px; height: 120px; padding: .4rem 0; }
.bar-col { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.bar-col .bar { width: 100%; max-width: 34px; border-radius: 6px 6px 3px 3px; background: linear-gradient(to top, var(--accent), var(--accent-3)); box-shadow: 0 0 calc(12px * var(--glow)) rgb(var(--accent-rgb) / .4); }
.bar-col small { font-size: .68rem; height: 1em; }
.rank { display: flex; align-items: center; gap: .7rem; padding: .35rem 0; } .rank .n { width: 1.4rem; text-align: center; font-weight: 700; color: var(--accent-3); }
.hbar { display: grid; grid-template-columns: 7rem 1fr auto; align-items: center; gap: .6rem; margin: .5rem 0; font-size: .88rem; }
.hbar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hbar div { height: 9px; border-radius: 99px; background: rgb(var(--text-rgb) / .08); overflow: hidden; }
.hbar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--accent), var(--accent-3)); }
.weeks { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .5rem; }
.week { display: flex; flex-direction: column; gap: .25rem; padding: .6rem; border-radius: 14px; background: rgb(var(--text-rgb) / .05); } .week small { font-size: .72rem; }
.gtag { font-size: .74rem; padding: .12rem .5rem; border-radius: 99px; background: rgb(var(--accent-2-rgb) / .22); width: fit-content; } .gtag.dim { opacity: .5; }

/* ---------- Studio / Ajustes ---------- */
.presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .6rem; }
.preset { position: relative; display: flex; flex-direction: column; gap: .5rem; padding: .6rem; text-align: left; overflow: hidden; }
.preset > i, .preset button i { display: block; height: 54px; border-radius: calc(var(--radius) * .5); background: radial-gradient(circle at 20% 20%, var(--pa), transparent 60%), radial-gradient(circle at 80% 80%, var(--pb), transparent 60%), radial-gradient(circle at 55% 45%, var(--pc), transparent 45%), var(--pbg); }
.preset span { font-size: .82rem; } .preset.on { border-color: var(--accent-3); box-shadow: 0 0 calc(16px * var(--glow)) rgb(var(--accent-3-rgb) / .5); }
.preset.custom { padding: 0; } .preset.custom > button:first-child { display: flex; flex-direction: column; gap: .5rem; padding: .6rem; width: 100%; } .preset .x { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: rgb(0 0 0 / .55); }
.colors { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: .6rem; }
.color { display: flex; flex-direction: column; align-items: center; gap: .35rem; font-size: .78rem; color: var(--dim); }
.color input { width: 100%; height: 48px; border: 1px solid var(--line); border-radius: 14px; background: none; padding: 3px; }
.slider { display: block; margin: .7rem 0; } .slider span { display: flex; justify-content: space-between; font-size: .85rem; margin-bottom: .2rem; } .slider em { font-style: normal; color: var(--accent-3); font-variant-numeric: tabular-nums; }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 32px; background: transparent; }
input[type=range]::-webkit-slider-runnable-track { height: 5px; border-radius: 99px; background: linear-gradient(90deg, var(--accent), var(--accent-3)); opacity: .9; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; margin-top: -8.5px; background: #fff; box-shadow: 0 0 calc(12px * var(--glow)) var(--accent-3), 0 2px 6px rgb(0 0 0 / .4); }
input[type=range]::-moz-range-track { height: 5px; border-radius: 99px; background: linear-gradient(90deg, var(--accent), var(--accent-3)); }
input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border: 0; border-radius: 50%; background: #fff; }
input[type=range]:disabled { opacity: .35; }
.home-list { display: grid; gap: .4rem; } .home-item { display: flex; align-items: center; gap: .6rem; padding: .35rem .5rem .35rem .7rem; } .home-item b { flex: 1; font-size: .9rem; } .home-item.off b { opacity: .45; }
.switch { position: relative; display: inline-block; width: 46px; height: 28px; flex: none; } .switch input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; z-index: 1; }
.switch span { position: absolute; inset: 0; border-radius: 99px; background: rgb(var(--text-rgb) / .18); transition: .2s; } .switch span::after { content: ""; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: .2s; }
.switch input:checked + span { background: linear-gradient(var(--angle), var(--accent), var(--accent-3)); } .switch input:checked + span::after { transform: translateX(18px); }
.row-switch { display: flex; justify-content: space-between; align-items: center; gap: 1rem; } .row-switch span b { display: block; font-size: .92rem; } .row-switch small { font-size: .78rem; line-height: 1.4; display: block; margin-top: .15rem; }
.provider-card { padding: .9rem 1rem; margin: .7rem 0; } .provider-card h3 { font-size: 1rem; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.table { padding: .3rem .9rem; } .trow { display: flex; flex-direction: column; gap: .1rem; padding: .6rem 0; font-size: .82rem; border-bottom: 1px solid var(--line); } .trow:last-child { border: 0; } .trow span { color: var(--dim); }
.checklist { padding: .4rem .9rem; } .check { display: flex; gap: .7rem; align-items: center; padding: .65rem 0; font-size: .9rem; border-bottom: 1px solid var(--line); } .check:last-child { border: 0; } .check input { width: 22px; height: 22px; accent-color: var(--accent-3); flex: none; }

/* ---------- Mini reproductor y barra de pestañas ---------- */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; padding-bottom: var(--sab); background: rgb(var(--text-rgb) / calc(var(--glass-a) * .35)); backdrop-filter: blur(calc(var(--blur) + 10px)) saturate(150%); -webkit-backdrop-filter: blur(calc(var(--blur) + 10px)) saturate(150%); border-top: 1px solid var(--line); }
.tabbar::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--bg); opacity: .72; }
.tabbar a { flex: 1; height: var(--tab-h); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--dim); transition: color .2s; }
.tabbar a small { font-size: .64rem; color: inherit; } .tabbar a.on { color: var(--accent-3); } .tabbar a.on .ic { filter: drop-shadow(0 0 calc(8px * var(--glow)) var(--accent-3)); }
#mini { position: fixed; left: .6rem; right: .6rem; bottom: calc(var(--tab-h) + var(--sab) + .4rem); z-index: 31; height: var(--mini-h); display: none; align-items: center; gap: .1rem; padding: .3rem .4rem .3rem .5rem; border-radius: calc(var(--radius) * .8); background: rgb(var(--text-rgb) / calc(var(--glass-a) + .08)); border: 1px solid var(--line); backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur)); overflow: hidden; box-shadow: 0 8px calc(30px * var(--glow)) rgb(var(--accent-rgb) / .3); }
#mini.show { display: flex; } .mini-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: .7rem; height: 100%; }
.mini-bar { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: rgb(var(--text-rgb) / .1); } .mini-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent-3)); }

/* ---------- Dock de reproductor oficial (YouTube / SoundCloud) ---------- */
#embed-dock { position: fixed; z-index: 55; display: none; right: .8rem; bottom: calc(var(--tab-h) + var(--sab) + var(--mini-h) + .9rem); width: 176px; height: 99px; border-radius: 14px; overflow: hidden; background: #000; border: 1px solid var(--line); box-shadow: 0 10px 30px rgb(0 0 0 / .5); }
#embed-dock.active { display: block; } #embed-dock.in-player { right: auto; bottom: auto; border-radius: calc(var(--radius) * .6); box-shadow: 0 0 calc(30px * var(--glow)) rgb(var(--accent-rgb) / .5); }
#embed-host, #embed-host iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---------- Reproductor ---------- */
#player { position: fixed; inset: 0; z-index: 50; transform: translateY(105%); visibility: hidden; transition: transform calc(.45s * (1.2 - var(--motion) * .6)) cubic-bezier(.2, .8, .2, 1), visibility 0s .5s; background: var(--bg); overflow: hidden; }
#player.open { transform: none; visibility: visible; transition-delay: 0s; }
.pv { position: relative; height: 100%; display: flex; flex-direction: column; padding: calc(var(--sat) + .4rem) 1.2rem calc(var(--sab) + 1rem); max-width: 620px; margin: 0 auto; }
.pv-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; }
.pv-bg img { position: absolute; inset: -12%; width: 124%; height: 124%; object-fit: cover; filter: blur(60px) saturate(1.5) brightness(.55); opacity: .75; }
.pv-orbs { position: absolute; inset: 0; background: radial-gradient(circle at 20% 15%, rgb(var(--accent-rgb) / .4), transparent 45%), radial-gradient(circle at 85% 85%, rgb(var(--accent-2-rgb) / .4), transparent 45%); animation: orb calc(var(--blob-dur) * .6) ease-in-out infinite alternate; }
@keyframes orb { to { transform: scale(1.25) rotate(8deg); } }
.pv-top { display: flex; align-items: center; justify-content: space-between; gap: .3rem; }
.modes { display: flex; padding: 3px; border-radius: 99px; background: rgb(var(--text-rgb) / .1); backdrop-filter: blur(var(--blur)); } .mode { min-height: 34px; padding: 0 .75rem; border-radius: 99px; font-size: .78rem; color: var(--dim); } .mode.on { background: rgb(var(--text-rgb) / .2); color: var(--text); }
.pv-stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: .8rem 0; }
.pv-cover { width: min(100%, 52dvh, 380px); aspect-ratio: 1; border-radius: calc(var(--radius) * 1.1); overflow: hidden; transition: transform .25s ease-out, box-shadow .3s; box-shadow: 0 20px calc(70px * var(--glow)) rgb(var(--accent-rgb) / .5), 0 8px 24px rgb(0 0 0 / .5); transform-style: preserve-3d; touch-action: pan-y; }
.pv-cover .art { border-radius: 0; }
.pv:not(.is-playing) .pv-cover { transform: scale(.94); } .pv.is-playing .pv-cover { animation: breathe calc(6s - var(--motion) * 2s) ease-in-out infinite; } @keyframes breathe { 50% { box-shadow: 0 24px calc(90px * var(--glow)) rgb(var(--accent-3-rgb) / .55), 0 8px 24px rgb(0 0 0 / .5); } }
.viz-wrap { position: relative; width: 100%; height: min(46dvh, 340px); border-radius: var(--radius); overflow: hidden; background: rgb(0 0 0 / .25); border: 1px solid var(--line); } #viz { width: 100%; height: 100%; display: block; }
.viz-cover { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 96px; height: 96px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 calc(30px * var(--glow)) var(--accent-3); } .viz-cover .art { border-radius: 50%; } .viz-note { margin-top: .5rem; font-size: .72rem; text-align: center; }
.pv[data-mode="immersive"] .pv-cover { width: min(112%, 62dvh); margin: 0 -6%; border-radius: calc(var(--radius) * 1.4); transform: perspective(900px) rotateX(4deg); }
.pv[data-mode="immersive"] .pv-bg img { filter: blur(40px) saturate(1.8) brightness(.7); animation: kb 24s ease-in-out infinite alternate; } @keyframes kb { to { transform: scale(1.18) translate(2%, -2%); } }
.pv.hide-ui .pv-ui, .pv.hide-ui .pv-top { opacity: 0; pointer-events: none; } .pv-ui, .pv-top { transition: opacity .35s; }
.embed-slot { width: 100%; max-width: 520px; aspect-ratio: 16 / 9; border-radius: calc(var(--radius) * .6); background: rgb(0 0 0 / .3); }
.pv-info { display: flex; align-items: center; justify-content: space-between; gap: .6rem; } .pv-titles { min-width: 0; } .pv-titles h2 { font-size: 1.4rem; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pv-titles p { color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: .15rem; }
.pv .badges { margin: .5rem 0 .2rem; }
.pv-prog { display: flex; align-items: center; gap: .6rem; font-size: .75rem; color: var(--dim); font-variant-numeric: tabular-nums; } .pv-prog input { flex: 1; }
.pv-ctl { display: flex; align-items: center; justify-content: space-between; margin: .1rem 0; }
.play-btn { width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: linear-gradient(var(--angle), var(--accent), var(--accent-2)); box-shadow: 0 8px calc(34px * var(--glow)) rgb(var(--accent-rgb) / .6); transition: transform .15s; } .play-btn:active { transform: scale(.92); }
html[data-btn="square"] .play-btn { border-radius: 18px; } html[data-btn="round"] .play-btn { border-radius: 28px; } html[data-btn="neon"] .play-btn { background: transparent; border: 2px solid var(--accent-3); color: var(--accent-3); box-shadow: 0 0 calc(24px * var(--glow)) var(--accent-3), inset 0 0 calc(14px * var(--glow)) rgb(var(--accent-3-rgb) / .35); }
.pv-sec { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-top: .3rem; } .pv-sec .vol { flex: 1; min-width: 90px; }
.pv-note { font-size: .78rem; color: var(--dim); margin-top: .5rem; line-height: 1.4; } .lic { display: block; margin-top: .4rem; font-size: .72rem; }
.linkbtn { color: var(--accent-3); text-decoration: underline; }

/* ---------- Hoja, toast, bienvenida ---------- */
#sheet { position: fixed; inset: 0; z-index: 70; background: rgb(0 0 0 / .55); opacity: 0; pointer-events: none; transition: opacity .25s; display: flex; align-items: flex-end; justify-content: center; }
#sheet.open { opacity: 1; pointer-events: auto; }
.sheet-panel { width: 100%; max-width: 620px; max-height: 82dvh; overflow-y: auto; padding: .5rem 1.1rem calc(var(--sab) + 1.2rem); border-radius: calc(var(--radius) * 1.2) calc(var(--radius) * 1.2) 0 0; background: rgb(14 16 28 / .96); border: 1px solid var(--line); border-bottom: 0; backdrop-filter: blur(var(--blur)); transform: translateY(30px); transition: transform .3s cubic-bezier(.2, .8, .2, 1); overscroll-behavior: contain; }
#sheet.open .sheet-panel { transform: none; } .sheet-grip { width: 38px; height: 4px; border-radius: 4px; background: var(--line); margin: .3rem auto .7rem; } .sheet-title { font-size: 1.05rem; margin-bottom: .5rem; }
.menu { display: flex; flex-direction: column; } .menu button, .menu-link, .menu-off { display: flex; align-items: center; gap: .9rem; min-height: 52px; padding: .3rem .2rem; border-bottom: 1px solid var(--line); color: var(--text); font-size: .95rem; } .menu > :last-child { border: 0; } .menu small { display: block; font-size: .74rem; } .menu-off { opacity: .6; }
.menu-track { display: flex; align-items: center; gap: .8rem; padding-bottom: .6rem; margin-bottom: .2rem; border-bottom: 1px solid var(--line); }
.ask { display: flex; gap: .6rem; align-items: center; margin-top: .6rem; } .mic { border: 1px solid var(--line); }
#toast { position: fixed; left: 50%; bottom: calc(var(--tab-h) + var(--sab) + var(--mini-h) + 1.2rem); transform: translate(-50%, 20px); z-index: 90; max-width: min(92vw, 520px); padding: .7rem 1rem; border-radius: 16px; background: rgb(24 27 44 / .97); border: 1px solid var(--line); font-size: .88rem; opacity: 0; pointer-events: none; transition: .25s; display: flex; gap: .8rem; align-items: center; box-shadow: 0 8px 30px rgb(0 0 0 / .5); }
#toast.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; } .toast-act { color: var(--accent-3); font-weight: 700; white-space: nowrap; }
#welcome { position: fixed; inset: 0; z-index: 100; background: var(--bg); display: none; overflow-y: auto; } #welcome.open { display: block; }
#welcome-body { min-height: 100%; max-width: 520px; margin: 0 auto; padding: calc(var(--sat) + 2.5rem) 1.5rem calc(var(--sab) + 2rem); display: flex; flex-direction: column; justify-content: center; gap: 1rem; }
#welcome-body h1 { font-size: 2.4rem; letter-spacing: -.03em; background: linear-gradient(var(--angle), var(--accent-3), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.w-hero { color: var(--accent-3); filter: drop-shadow(0 0 calc(20px * var(--glow)) var(--accent-3)); } .lead { font-size: 1.05rem; line-height: 1.5; color: var(--dim); }
.w-list { list-style: none; padding: 0; display: grid; gap: .7rem; margin: .5rem 0; } .w-list li { display: flex; gap: .6rem; align-items: flex-start; font-size: .95rem; line-height: 1.4; } .w-list .ic { color: var(--accent-3); margin-top: 2px; }
.dots { display: flex; gap: .4rem; justify-content: center; margin: .5rem 0; } .dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--line); } .dots i.on { background: var(--accent-3); width: 22px; border-radius: 4px; }
@media (min-width: 700px) { .hscroll { margin: 0; padding-inline: 0; } }

.guide { border-bottom: 1px solid var(--line); padding: .2rem 0; } .guide summary { min-height: 46px; display: flex; align-items: center; cursor: pointer; font-size: .92rem; } .guide ol, .guide p { font-size: .84rem; line-height: 1.55; color: var(--dim); margin: .2rem 0 .8rem; padding-left: 1.2rem; } .guide p { padding: 0; }
.w-scroll { display: flex; flex-direction: column; gap: .8rem; } .w-step-n { font-size: .75rem; color: var(--dim); letter-spacing: .1em; text-transform: uppercase; }
.sum-list { display: grid; gap: .5rem; } .sum-item { display: flex; gap: .6rem; align-items: flex-start; font-size: .9rem; line-height: 1.4; } .sum-item .ic { margin-top: 2px; flex: none; } .sum-ok .ic { color: #4ade80; } .sum-todo .ic { color: #fbbf24; }