/*
Theme Name: SoundBlue
Theme URI: https://example.com/soundblue
Author: SoundBlue
Description: Tema oscuro inspirado en reproductores de música web: barra lateral fija, tarjetas tipo álbum, cabeceras con degradado y barra de reproducción inferior. Paleta azul y negro.
Version: 2.0.0
Requires at least: 5.8
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: soundblue
Tags: dark, blog, two-columns, left-sidebar, custom-menu, custom-logo, featured-images, grid-layout
*/

:root {
	--sb-bg: #000000;
	--sb-panel: #0a0f1c;
	--sb-panel-2: #101827;
	--sb-card: #121b2e;
	--sb-card-hover: #1a2640;
	--sb-accent: #1e90ff;
	--sb-accent-hover: #4aa8ff;
	--sb-accent-dark: #0b3d91;
	--sb-text: #ffffff;
	--sb-muted: #9aa6b8;
	--sb-border: #1f2a40;
	--sb-radius: 10px;
	--sb-player-h: 84px;
	--sb-sidebar-w: 300px;
}

* { box-sizing: border-box; }

html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	background: var(--sb-bg);
	color: var(--sb-text);
	font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

a { color: var(--sb-text); text-decoration: none; transition: color .2s; }
a:hover { color: var(--sb-accent-hover); }
img { max-width: 100%; height: auto; display: block; }
button { font-family: inherit; }

.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px,1px,1px,1px); white-space: nowrap;
}
.skip-link:focus {
	clip: auto; width: auto; height: auto; z-index: 1000;
	background: var(--sb-accent); color: #000; padding: 10px 16px; top: 8px; left: 8px;
}

/* ========== LAYOUT ========== */
.sb-app {
	display: grid;
	grid-template-columns: var(--sb-sidebar-w) 1fr;
	grid-template-rows: 1fr var(--sb-player-h);
	gap: 8px;
	padding: 8px;
	height: 100vh;
	height: 100dvh;
}

.sb-sidebar {
	grid-row: 1;
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-height: 0;
}

.sb-main {
	grid-row: 1;
	background: var(--sb-panel);
	border-radius: var(--sb-radius);
	overflow-y: auto;
	position: relative;
	min-height: 0;
}

/* ========== SIDEBAR ========== */
.sb-box {
	background: var(--sb-panel);
	border-radius: var(--sb-radius);
	padding: 16px 12px;
}

.sb-brand {
	display: flex; align-items: center; gap: 10px;
	padding: 4px 12px 16px;
	font-weight: 800; font-size: 1.35rem; letter-spacing: -.5px;
}
.sb-brand .custom-logo { max-height: 40px; width: auto; }
.sb-brand-icon {
	width: 36px; height: 36px; border-radius: 50%;
	background: var(--sb-accent);
	display: grid; place-items: center; flex-shrink: 0;
}
.sb-brand-icon svg { width: 20px; height: 20px; fill: #000; }

.sb-nav ul { list-style: none; margin: 0; padding: 0; }
.sb-nav a {
	display: flex; align-items: center; gap: 16px;
	padding: 10px 12px;
	color: var(--sb-muted);
	font-weight: 700;
	border-radius: 6px;
}
.sb-nav a:hover, .sb-nav .current-menu-item > a, .sb-nav .current_page_item > a { color: var(--sb-text); }
.sb-nav .current-menu-item > a { background: var(--sb-panel-2); }
.sb-nav svg { width: 24px; height: 24px; fill: currentColor; flex-shrink: 0; }
.sb-nav ul ul { padding-left: 40px; }
.sb-nav ul ul a { font-weight: 500; padding: 6px 12px; }

.sb-library {
	flex: 1;
	overflow-y: auto;
	min-height: 0;
}
.sb-library-head {
	display: flex; align-items: center; justify-content: space-between;
	padding: 4px 12px 12px;
	color: var(--sb-muted); font-weight: 700;
}
.sb-library-head span { display: flex; align-items: center; gap: 12px; }
.sb-library-head svg { width: 24px; height: 24px; fill: currentColor; }

.sb-chips { display: flex; gap: 8px; padding: 0 12px 12px; flex-wrap: wrap; }
.sb-chip {
	background: var(--sb-panel-2);
	color: var(--sb-text);
	border-radius: 999px;
	padding: 6px 14px;
	font-size: .85rem;
	border: 1px solid transparent;
}
.sb-chip:hover { background: var(--sb-card-hover); color: var(--sb-text); }
.sb-chip.is-active { background: var(--sb-accent); color: #000; }

.sb-lib-list { list-style: none; margin: 0; padding: 0; }
.sb-lib-item a {
	display: flex; align-items: center; gap: 12px;
	padding: 8px 12px;
	border-radius: 6px;
}
.sb-lib-item a:hover { background: var(--sb-panel-2); color: var(--sb-text); }
.sb-lib-thumb {
	width: 48px; height: 48px; border-radius: 6px; flex-shrink: 0;
	background: linear-gradient(135deg, var(--sb-accent-dark), var(--sb-accent));
	display: grid; place-items: center; overflow: hidden;
	font-weight: 800; font-size: 1.1rem;
}
.sb-lib-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sb-lib-meta strong { display: block; font-weight: 600; font-size: .95rem; line-height: 1.3; }
.sb-lib-meta small { color: var(--sb-muted); font-size: .8rem; }

.sb-sidebar .widget { padding: 8px 12px; color: var(--sb-muted); font-size: .9rem; }
.sb-sidebar .widget-title { color: var(--sb-text); font-size: 1rem; margin: 8px 0; }
.sb-sidebar .widget ul { list-style: none; padding: 0; margin: 0; }
.sb-sidebar .widget li { padding: 4px 0; }
.sb-sidebar .widget a { color: var(--sb-muted); }
.sb-sidebar .widget a:hover { color: var(--sb-text); }

/* ========== TOPBAR ========== */
.sb-topbar {
	position: sticky; top: 0; z-index: 20;
	display: flex; align-items: center; gap: 12px;
	padding: 14px 24px;
	transition: background .25s;
}
.sb-topbar.is-scrolled {
	background: rgba(8, 22, 52, .92);
	backdrop-filter: blur(10px);
	box-shadow: 0 6px 20px rgba(0, 0, 0, .45);
}

.sb-circle-btn {
	width: 34px; height: 34px; border-radius: 50%;
	background: rgba(0,0,0,.6); border: 0; color: var(--sb-text);
	display: grid; place-items: center; cursor: pointer; flex-shrink: 0;
}
.sb-circle-btn:hover { background: rgba(0,0,0,.85); }
.sb-circle-btn svg { width: 18px; height: 18px; fill: currentColor; }
.sb-menu-toggle { display: none; }

.sb-search { flex: 1; max-width: 420px; position: relative; }
.sb-search input[type="search"] {
	width: 100%;
	background: var(--sb-panel-2);
	border: 2px solid transparent;
	border-radius: 999px;
	color: var(--sb-text);
	padding: 10px 16px 10px 44px;
	font-size: .95rem;
	font-family: inherit;
	outline: none;
	transition: border-color .2s, background .2s;
}
.sb-search input[type="search"]:hover { background: var(--sb-card-hover); }
.sb-search input[type="search"]:focus { border-color: var(--sb-accent); }
.sb-search svg {
	position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
	width: 20px; height: 20px; fill: var(--sb-muted); pointer-events: none;
}
.sb-search button[type="submit"] { display: none; }

.sb-topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.sb-pill {
	display: inline-flex; align-items: center; gap: 8px;
	background: var(--sb-text); color: #000;
	padding: 8px 18px; border-radius: 999px;
	font-weight: 700; font-size: .9rem; border: 0; cursor: pointer;
	transition: transform .15s;
}
.sb-pill:hover { transform: scale(1.04); color: #000; }
.sb-pill.is-ghost { background: transparent; color: var(--sb-muted); }
.sb-pill.is-ghost:hover { color: var(--sb-text); }
.sb-avatar img { width: 32px; height: 32px; border-radius: 50%; border: 3px solid rgba(0,0,0,.6); }

/* ========== HERO / HEADERS ========== */
.sb-hero {
	margin-top: -62px;
	padding: 90px 24px 24px;
	background: linear-gradient(180deg, var(--sb-accent-dark) 0%, rgba(11, 61, 145, .35) 60%, var(--sb-panel) 100%);
}
.sb-hero h1 { font-size: 2rem; margin: 0 0 20px; letter-spacing: -.5px; }

.sb-quick-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 10px;
}
.sb-quick {
	display: flex; align-items: center;
	background: rgba(255,255,255,.08);
	border-radius: 6px; overflow: hidden;
	height: 64px; position: relative;
	transition: background .2s;
}
.sb-quick:hover { background: rgba(255,255,255,.18); color: var(--sb-text); }
.sb-quick-img {
	width: 64px; height: 64px; flex-shrink: 0;
	background: linear-gradient(135deg, var(--sb-accent), var(--sb-accent-dark));
	display: grid; place-items: center; font-weight: 800;
	box-shadow: 0 6px 16px rgba(0,0,0,.4);
}
.sb-quick-img img { width: 100%; height: 100%; object-fit: cover; }
.sb-quick-title { padding: 0 56px 0 14px; font-weight: 700; font-size: .95rem; line-height: 1.25; }
.sb-quick .sb-play { width: 40px; height: 40px; right: 12px; bottom: 12px; }

/* ========== SECTIONS + CARDS ========== */
.sb-section { padding: 16px 24px 8px; }
.sb-section-head {
	display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px;
}
.sb-section-head h2 { margin: 0; font-size: 1.5rem; letter-spacing: -.3px; }
.sb-section-head a { color: var(--sb-muted); font-weight: 700; font-size: .85rem; }
.sb-section-head a:hover { color: var(--sb-text); text-decoration: underline; }

.sb-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 12px;
}
.sb-card {
	background: var(--sb-card);
	border-radius: var(--sb-radius);
	padding: 14px;
	transition: background .25s;
	position: relative;
	display: block;
}
.sb-card:hover { background: var(--sb-card-hover); color: var(--sb-text); }
.sb-card-cover {
	position: relative;
	aspect-ratio: 1 / 1;
	border-radius: 6px;
	overflow: hidden;
	margin-bottom: 14px;
	box-shadow: 0 8px 24px rgba(0,0,0,.5);
	background: linear-gradient(135deg, var(--sb-accent-dark), var(--sb-accent));
}
.sb-card-cover img { width: 100%; height: 100%; object-fit: cover; }
.sb-card-cover .sb-placeholder {
	width: 100%; height: 100%; display: grid; place-items: center;
	font-size: 3rem; font-weight: 800; color: rgba(255,255,255,.9);
}
.sb-card h3 {
	margin: 0 0 4px; font-size: 1rem; line-height: 1.3;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sb-card p {
	margin: 0; color: var(--sb-muted); font-size: .85rem; line-height: 1.45;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.sb-play {
	position: absolute; right: 8px; bottom: 8px;
	width: 48px; height: 48px; border-radius: 50%;
	background: var(--sb-accent);
	display: grid; place-items: center;
	box-shadow: 0 8px 18px rgba(0,0,0,.5);
	opacity: 0; transform: translateY(8px);
	transition: opacity .25s, transform .25s, background .2s;
}
.sb-play svg { width: 22px; height: 22px; fill: #000; margin-left: 2px; }
.sb-card:hover .sb-play, .sb-quick:hover .sb-play { opacity: 1; transform: translateY(0); }
.sb-play:hover { background: var(--sb-accent-hover); transform: scale(1.06) !important; }

/* ========== SINGLE / PAGE ========== */
.sb-entry-hero {
	margin-top: -62px;
	padding: 100px 24px 24px;
	display: flex; align-items: flex-end; gap: 24px;
	background: linear-gradient(180deg, #1565c0 0%, var(--sb-accent-dark) 100%);
	min-height: 340px;
}
.sb-entry-cover {
	width: 232px; height: 232px; flex-shrink: 0;
	border-radius: 6px; overflow: hidden;
	box-shadow: 0 10px 40px rgba(0,0,0,.6);
	background: linear-gradient(135deg, var(--sb-accent-dark), var(--sb-accent));
}
.sb-entry-cover img { width: 100%; height: 100%; object-fit: cover; }
.sb-entry-cover .sb-placeholder {
	width: 100%; height: 100%; display: grid; place-items: center; font-size: 5rem; font-weight: 800;
}
.sb-entry-label { font-size: .85rem; font-weight: 600; margin: 0; }
.sb-entry-title {
	font-size: clamp(2rem, 5vw, 4.5rem); line-height: 1.05; margin: 6px 0 14px;
	letter-spacing: -1.5px; font-weight: 800;
}
.sb-entry-meta { font-size: .9rem; color: rgba(255,255,255,.85); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sb-entry-meta img { width: 24px; height: 24px; border-radius: 50%; }
.sb-entry-meta strong { color: #fff; }
.sb-dot::before { content: "•"; margin: 0 2px; }

.sb-actions {
	display: flex; align-items: center; gap: 24px;
	padding: 24px;
	background: linear-gradient(180deg, rgba(11,61,145,.45) 0%, var(--sb-panel) 220px);
}
.sb-actions .sb-play {
	position: static; opacity: 1; transform: none; width: 56px; height: 56px;
}
.sb-actions .sb-play svg { width: 26px; height: 26px; }
.sb-icon-btn { background: none; border: 0; color: var(--sb-muted); cursor: pointer; padding: 0; }
.sb-icon-btn:hover { color: var(--sb-text); }
.sb-icon-btn svg { width: 32px; height: 32px; fill: currentColor; }
.sb-icon-btn.is-liked { color: var(--sb-accent); }

.sb-content {
	padding: 0 24px 40px;
	max-width: 820px;
	color: #dbe3ef;
	font-size: 1.05rem;
}
.sb-content h2, .sb-content h3, .sb-content h4 { color: #fff; line-height: 1.25; margin-top: 2em; }
.sb-content a { color: var(--sb-accent-hover); text-decoration: underline; }
.sb-content blockquote {
	margin: 1.5em 0; padding: 12px 20px;
	border-left: 4px solid var(--sb-accent);
	background: var(--sb-panel-2); border-radius: 0 6px 6px 0;
}
.sb-content pre, .sb-content code {
	background: var(--sb-panel-2); border-radius: 6px; font-size: .9em;
}
.sb-content pre { padding: 16px; overflow-x: auto; }
.sb-content code { padding: 2px 6px; }
.sb-content img, .sb-content figure { border-radius: 8px; margin: 1.5em 0; }
.sb-content table { width: 100%; border-collapse: collapse; }
.sb-content th, .sb-content td { border-bottom: 1px solid var(--sb-border); padding: 10px; text-align: left; }
.sb-content .alignleft { float: left; margin: 0 1.5em 1em 0; }
.sb-content .alignright { float: right; margin: 0 0 1em 1.5em; }
.sb-content .aligncenter { margin-left: auto; margin-right: auto; }
.wp-caption-text, .wp-element-caption { color: var(--sb-muted); font-size: .85rem; text-align: center; }

.sb-tags { padding: 0 24px 24px; display: flex; flex-wrap: wrap; gap: 8px; }

/* Lista tipo "canciones" para posts relacionados */
.sb-tracklist { list-style: none; margin: 0; padding: 0 24px 24px; }
.sb-track a {
	display: grid; grid-template-columns: 32px 48px 1fr auto; align-items: center; gap: 14px;
	padding: 8px 12px; border-radius: 6px; color: var(--sb-muted);
}
.sb-track a:hover { background: var(--sb-card-hover); }
.sb-track-num { text-align: right; font-size: .95rem; }
.sb-track-thumb { width: 48px; height: 48px; border-radius: 4px; overflow: hidden; background: var(--sb-card); }
.sb-track-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sb-track-title { color: var(--sb-text); font-weight: 600; display: block; }
.sb-track-sub { font-size: .85rem; }
.sb-track-date { font-size: .85rem; }

/* ========== ARCHIVE HEADER ========== */
.sb-archive-hero {
	margin-top: -62px;
	padding: 110px 24px 28px;
	background: linear-gradient(180deg, #0d47a1 0%, var(--sb-panel) 100%);
}
.sb-archive-hero h1 { font-size: clamp(2rem, 5vw, 4rem); margin: 4px 0 8px; letter-spacing: -1px; line-height: 1.05; }
.sb-archive-hero p { color: var(--sb-muted); margin: 0; }

/* ========== PAGINATION ========== */
.sb-pagination { padding: 24px; }
.sb-pagination .nav-links { display: flex; gap: 8px; flex-wrap: wrap; }
.sb-pagination .page-numbers {
	min-width: 40px; height: 40px; padding: 0 12px; border-radius: 999px;
	display: inline-grid; place-items: center;
	background: var(--sb-card); font-weight: 700; font-size: .9rem;
}
.sb-pagination .page-numbers.current { background: var(--sb-accent); color: #000; }
.sb-pagination a.page-numbers:hover { background: var(--sb-card-hover); color: var(--sb-text); }

/* ========== COMMENTS ========== */
.sb-comments { padding: 8px 24px 40px; max-width: 820px; }
.sb-comments h2 { font-size: 1.4rem; }
.comment-list { list-style: none; padding: 0; margin: 0 0 24px; }
.comment-list ol { list-style: none; padding-left: 24px; }
.comment-body {
	background: var(--sb-card); border-radius: var(--sb-radius); padding: 16px; margin-bottom: 12px;
}
.comment-author { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.comment-author img { border-radius: 50%; }
.comment-author .says { display: none; }
.comment-metadata, .comment-metadata a { color: var(--sb-muted); font-size: .8rem; }
.reply a { color: var(--sb-accent-hover); font-size: .85rem; font-weight: 700; }
.comment-form label { display: block; font-size: .85rem; color: var(--sb-muted); margin-bottom: 4px; }
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea {
	width: 100%; background: var(--sb-panel-2); border: 1px solid var(--sb-border);
	color: var(--sb-text); border-radius: 8px; padding: 10px 12px; font-family: inherit; font-size: .95rem;
}
.comment-form input:focus, .comment-form textarea:focus { outline: none; border-color: var(--sb-accent); }
.comment-form .submit, .sb-button {
	background: var(--sb-accent); color: #000; border: 0; border-radius: 999px;
	padding: 12px 28px; font-weight: 700; cursor: pointer; font-size: .95rem; display: inline-block;
	transition: transform .15s, background .2s;
}
.comment-form .submit:hover, .sb-button:hover { background: var(--sb-accent-hover); transform: scale(1.04); color: #000; }

/* ========== 404 / EMPTY ========== */
.sb-empty { padding: 120px 24px; text-align: center; }
.sb-empty h1 { font-size: 3rem; margin: 0 0 10px; }
.sb-empty p { color: var(--sb-muted); margin-bottom: 28px; }

/* ========== FOOTER (site info) ========== */
.sb-site-footer {
	padding: 32px 24px 40px; margin-top: 24px;
	border-top: 1px solid var(--sb-border);
	color: var(--sb-muted); font-size: .85rem;
	display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px;
}
.sb-site-footer ul { list-style: none; display: flex; flex-wrap: wrap; gap: 16px; margin: 0; padding: 0; }
.sb-site-footer a { color: var(--sb-muted); }
.sb-site-footer a:hover { color: var(--sb-text); }

/* ========== PLAYER BAR ========== */
.sb-player {
	grid-column: 1 / -1;
	grid-row: 2;
	display: grid;
	grid-template-columns: 1fr 2fr 1fr;
	align-items: center;
	gap: 16px;
	padding: 0 12px;
	background: var(--sb-bg);
}
.sb-now { display: flex; align-items: center; gap: 12px; min-width: 0; }
.sb-now-thumb {
	width: 56px; height: 56px; border-radius: 4px; overflow: hidden; flex-shrink: 0;
	background: linear-gradient(135deg, var(--sb-accent-dark), var(--sb-accent));
}
.sb-now-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sb-now-text { min-width: 0; }
.sb-now-text a { display: block; font-weight: 600; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-now-text small { color: var(--sb-muted); font-size: .78rem; }
.sb-now .sb-icon-btn svg { width: 18px; height: 18px; }

.sb-controls { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.sb-controls-btns { display: flex; align-items: center; gap: 20px; }
.sb-controls-btns .sb-icon-btn svg { width: 18px; height: 18px; }
.sb-controls-btns .sb-icon-btn.is-on { color: var(--sb-accent); }
.sb-main-play {
	width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer;
	background: var(--sb-text); display: grid; place-items: center; transition: transform .15s;
}
.sb-main-play:hover { transform: scale(1.07); }
.sb-main-play svg { width: 16px; height: 16px; fill: #000; }
.sb-main-play:disabled { opacity: .4; cursor: default; transform: none; }
.sb-ico-play, .sb-ico-pause { display: grid; place-items: center; }
.sb-ico-pause { display: none; }
.is-playing .sb-ico-play { display: none; }
.is-playing .sb-ico-pause { display: grid; }
.sb-play .sb-ico-pause svg { margin-left: 0; }

.sb-progress { display: flex; align-items: center; gap: 8px; width: 100%; max-width: 600px; font-size: .72rem; color: var(--sb-muted); }
.sb-bar {
	flex: 1; height: 4px; border-radius: 4px; background: #2a3550; position: relative; cursor: pointer;
}
.sb-bar-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--sb-text); border-radius: 4px; }
.sb-bar:hover .sb-bar-fill { background: var(--sb-accent); }

.sb-extra { display: flex; justify-content: flex-end; align-items: center; gap: 10px; color: var(--sb-muted); }
.sb-extra svg { width: 18px; height: 18px; fill: currentColor; }
.sb-extra .sb-bar { flex: 0 0 96px; }
.sb-extra .sb-bar-fill { width: 70%; }

.sb-extra .sb-icon-btn svg { width: 18px; height: 18px; }
.sb-extra .sb-icon-btn.is-on { color: var(--sb-accent); }
.sb-extra [data-sb-volume] { cursor: pointer; }

/* ========== PISTA SONANDO ========== */
.sb-card.is-current .sb-play,
.sb-quick.is-current .sb-play { opacity: 1; transform: none; }
.sb-card.is-current h3,
.sb-quick.is-current .sb-quick-title { color: var(--sb-accent-hover); }
.sb-play.is-track { cursor: pointer; border: 0; }

/* ========== REPRODUCTOR OCULTO ========== */
/* El video de YouTube suena pero no se ve: queda invisible detrás de todo. */
.sb-video {
	position: fixed;
	left: 0; bottom: 0;
	width: 200px; height: 200px;
	opacity: 0;
	pointer-events: none;
	z-index: -1;
	overflow: hidden;
}
.sb-video iframe { width: 100%; height: 100%; border: 0; }

/* Estado "cargando" mientras arranca la canción */
@keyframes sb-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(30, 144, 255, .55); }
	50%      { box-shadow: 0 0 0 8px rgba(30, 144, 255, 0); }
}
.is-loading.sb-main-play,
.is-loading.sb-np-play,
.sb-play.is-loading { animation: sb-pulse 1s ease-out infinite; }

/* ========== SCROLL ========== */
.sb-main, .sb-library { scroll-behavior: smooth; overscroll-behavior: contain; }

/* Chrome, Edge, Safari */
.sb-main::-webkit-scrollbar,
.sb-library::-webkit-scrollbar,
.sb-content pre::-webkit-scrollbar { width: 12px; height: 12px; }
.sb-main::-webkit-scrollbar-track,
.sb-library::-webkit-scrollbar-track { background: transparent; margin: 8px 0; }
.sb-main::-webkit-scrollbar-thumb,
.sb-library::-webkit-scrollbar-thumb,
.sb-content pre::-webkit-scrollbar-thumb {
	background: transparent;
	border-radius: 999px;
	border: 3px solid transparent;
	background-clip: padding-box;
	transition: background .2s;
}
.sb-main:hover::-webkit-scrollbar-thumb,
.sb-library:hover::-webkit-scrollbar-thumb,
.sb-content pre:hover::-webkit-scrollbar-thumb {
	background: rgba(30, 144, 255, .35);
	background-clip: padding-box;
}
.sb-main::-webkit-scrollbar-thumb:hover,
.sb-library::-webkit-scrollbar-thumb:hover {
	background: var(--sb-accent);
	background-clip: padding-box;
}
.sb-main::-webkit-scrollbar-thumb:active,
.sb-library::-webkit-scrollbar-thumb:active { background: var(--sb-accent-hover); background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }

/* Firefox */
@supports not selector(::-webkit-scrollbar) {
	.sb-main, .sb-library { scrollbar-width: thin; scrollbar-color: rgba(30, 144, 255, .45) transparent; }
}

/* Aparición suave de tarjetas al hacer scroll */
.sb-reveal { opacity: 0; transform: translateY(18px); }
.sb-reveal.is-in {
	opacity: 1;
	transform: none;
	transition:
		opacity .5s ease var(--sb-delay, 0ms),
		transform .5s cubic-bezier(.2, .7, .2, 1) var(--sb-delay, 0ms),
		background .25s;
}

/* ========== MOBILE NAV ========== */
.sb-mobile-nav { display: none; }
.sb-overlay { display: none; }
.sb-np { display: none; }

/* Ecualizador animado en la pista que suena */
@keyframes sb-eq {
	0%   { background-size: 3px 30%, 3px 90%, 3px 50%; }
	33%  { background-size: 3px 90%, 3px 40%, 3px 80%; }
	66%  { background-size: 3px 50%, 3px 70%, 3px 30%; }
	100% { background-size: 3px 80%, 3px 30%, 3px 90%; }
}
.sb-card.is-playing h3::before,
.sb-quick.is-playing .sb-quick-title::before,
.sb-np.is-playing .sb-np-title::before {
	content: "";
	display: inline-block;
	width: 13px; height: 12px;
	margin-right: 7px;
	vertical-align: -1px;
	background:
		linear-gradient(var(--sb-accent), var(--sb-accent)) 0 100% no-repeat,
		linear-gradient(var(--sb-accent), var(--sb-accent)) 5px 100% no-repeat,
		linear-gradient(var(--sb-accent), var(--sb-accent)) 10px 100% no-repeat;
	background-size: 3px 30%, 3px 90%, 3px 50%;
	animation: sb-eq .9s ease-in-out infinite alternate;
}

/* Barras más fáciles de tocar y arrastrar */
.sb-bar { touch-action: none; }
.sb-bar::before { content: ""; position: absolute; inset: -10px 0; }
.sb-bar-knob {
	position: absolute; top: 50%; left: 0;
	width: 12px; height: 12px; margin: -6px 0 0 -6px;
	border-radius: 50%; background: #fff;
	box-shadow: 0 2px 6px rgba(0,0,0,.5);
	opacity: 0; transition: opacity .15s;
	pointer-events: none;
}
.sb-bar:hover .sb-bar-knob, .sb-bar.is-drag .sb-bar-knob { opacity: 1; }
.sb-bar.is-drag .sb-bar-fill { background: var(--sb-accent); }

/* ========== PLANTILLA PLAYLIST ========== */
.sb-pl-hero {
	margin-top: -62px;
	padding: 100px 24px 24px;
	display: flex; align-items: flex-end; gap: 24px;
	background: linear-gradient(180deg, #1565c0 0%, var(--sb-accent-dark) 100%);
	min-height: 340px;
}
.sb-pl-cover {
	position: relative;
	width: 232px; height: 232px; flex-shrink: 0;
	border-radius: 6px; overflow: hidden;
	box-shadow: 0 10px 40px rgba(0,0,0,.6);
	background: linear-gradient(135deg, var(--sb-accent-dark), var(--sb-accent));
}
.sb-pl-cover > img { width: 100%; height: 100%; object-fit: cover; }
.sb-pl-cover > img.is-yt {
	position: absolute; top: 50%; left: 50%;
	width: auto; height: 133.4%;
	transform: translate(-50%, -50%);
}
.sb-pl-cover .sb-placeholder { width: 100%; height: 100%; display: grid; place-items: center; }
.sb-pl-cover .sb-placeholder svg { width: 40%; height: 40%; fill: rgba(255,255,255,.9); }
.sb-pl-collage { display: grid; grid-template-columns: 1fr 1fr; width: 100%; height: 100%; }
.sb-pl-collage img { width: 100%; height: 100%; object-fit: cover; }
.sb-pl-info { min-width: 0; }
.sb-pl-desc { color: rgba(255,255,255,.75); font-size: .9rem; margin: -4px 0 10px; max-width: 640px; }
.sb-pl-desc p { margin: 0 0 4px; }
.sb-pl-logo {
	width: 24px; height: 24px; border-radius: 50%;
	background: var(--sb-accent); display: grid; place-items: center;
}
.sb-pl-logo svg { width: 14px; height: 14px; fill: #000; }
.sb-pl-shuffle svg { width: 28px; height: 28px; }
.sb-pl-shuffle.is-on { color: var(--sb-accent); }

.sb-pl-list { padding: 0 24px 32px; }
.sb-pl-head, .sb-row {
	display: grid;
	grid-template-columns: 40px minmax(0, 4fr) minmax(0, 2fr) minmax(0, 1.4fr) 48px;
	align-items: center;
	gap: 16px;
	padding: 0 16px;
}
.sb-pl-head {
	height: 36px;
	color: var(--sb-muted);
	font-size: .8rem;
	border-bottom: 1px solid var(--sb-border);
	margin-bottom: 12px;
	position: sticky; top: 62px; z-index: 5;
	background: var(--sb-panel);
}
.sb-rows { list-style: none; margin: 0; padding: 0; }
.sb-row {
	height: 60px;
	border-radius: 6px;
	color: var(--sb-muted);
	font-size: .88rem;
	cursor: pointer;
	user-select: none;
	transition: background .15s;
}
.sb-row:hover { background: rgba(255,255,255,.07); }
.sb-row.is-current { background: rgba(30,144,255,.10); }
.sb-row-num { position: relative; display: grid; place-items: center; height: 100%; text-align: center; font-variant-numeric: tabular-nums; }
.sb-row-index { font-size: 1rem; }
.sb-row-btn {
	display: none;
	width: 32px; height: 32px; border: 0; padding: 0; border-radius: 50%;
	background: none; color: #fff; cursor: pointer;
	place-items: center;
}
.sb-row-btn svg { width: 16px; height: 16px; fill: currentColor; }
.sb-row-eq { display: none; width: 14px; height: 14px; }
.sb-row:hover .sb-row-index, .sb-row:focus-within .sb-row-index { display: none; }
.sb-row:hover .sb-row-btn, .sb-row:focus-within .sb-row-btn { display: grid; }

/* Pista que suena: número en azul, ecualizador animado */
.sb-row.is-current .sb-row-index,
.sb-row.is-current .sb-row-title { color: var(--sb-accent-hover); }
.sb-row.is-playing .sb-row-index { display: none; }
.sb-row.is-playing .sb-row-eq {
	display: block;
	background:
		linear-gradient(var(--sb-accent), var(--sb-accent)) 0 100% no-repeat,
		linear-gradient(var(--sb-accent), var(--sb-accent)) 5px 100% no-repeat,
		linear-gradient(var(--sb-accent), var(--sb-accent)) 10px 100% no-repeat;
	background-size: 3px 30%, 3px 90%, 3px 50%;
	animation: sb-eq .9s ease-in-out infinite alternate;
}
.sb-row.is-playing:hover .sb-row-eq { display: none; }
.sb-row-btn .sb-ico-pause { display: none; }
.sb-row.is-playing .sb-row-btn .sb-ico-play { display: none; }
.sb-row.is-playing .sb-row-btn .sb-ico-pause { display: grid; }

.sb-row-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.sb-row-thumb {
	position: relative;
	width: 40px; height: 40px; flex-shrink: 0;
	border-radius: 4px; overflow: hidden;
	background: var(--sb-card);
}
.sb-row-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sb-row-thumb-play { display: none; }
.sb-row-text { min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.sb-row-title {
	color: var(--sb-text); font-size: 1rem; font-weight: 500;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sb-row-title:hover { text-decoration: underline; color: var(--sb-text); }
.sb-row.is-current .sb-row-title:hover { color: var(--sb-accent-hover); }
.sb-row-artist { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .85rem; }
.sb-row:hover .sb-row-artist { color: var(--sb-text); }
.sb-row-album, .sb-row-date { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-row-album a { color: var(--sb-muted); }
.sb-row:hover .sb-row-album a { color: var(--sb-text); }
.sb-row-album a:hover { text-decoration: underline; }
.sb-row-end { display: flex; justify-content: flex-end; }
.sb-row-more {
	display: grid; place-items: center; width: 32px; height: 32px;
	color: var(--sb-muted); opacity: 0; transition: opacity .15s;
}
.sb-row-more svg { width: 18px; height: 18px; fill: currentColor; }
.sb-row:hover .sb-row-more { opacity: 1; }
.sb-row-more:hover { color: var(--sb-text); }

#sb-lista { scroll-margin-top: 70px; }

@media (max-width: 1100px) {
	.sb-pl-head, .sb-row { grid-template-columns: 40px minmax(0, 4fr) minmax(0, 2fr) 48px; }
	.sb-row-date { display: none; }
}

/* ========== RESPONSIVE ========== */
@media (max-width: 1100px) {
	:root { --sb-sidebar-w: 240px; }
}

/* Pantallas táctiles: el botón de play siempre visible */
@media (hover: none) {
	.sb-card .sb-play.is-track { opacity: 1; transform: none; width: 40px; height: 40px; }
	.sb-card .sb-play.is-track svg { width: 18px; height: 18px; }
	.sb-card:active, .sb-quick:active, .sb-track a:active { transform: scale(.97); }
	.sb-card, .sb-quick, .sb-track a { transition: transform .12s ease, background .25s; }
}

@media (max-width: 860px) {
	html, body { overscroll-behavior: none; }
	body { -webkit-tap-highlight-color: transparent; }
	button, a, .sb-bar { touch-action: manipulation; }
	.sb-bar { touch-action: none; }

	.sb-app {
		grid-template-columns: 1fr;
		grid-template-rows: 1fr auto auto;
		padding: 0; gap: 0;
	}
	.sb-main { border-radius: 0; }
	body.sb-menu-open .sb-main,
	body.sb-np-open .sb-main { overflow: hidden; }

	/* --- Menú lateral --- */
	.sb-sidebar {
		position: fixed; top: 0; left: 0; bottom: 0; z-index: 100;
		width: min(86vw, 320px);
		padding: calc(8px + env(safe-area-inset-top)) 8px calc(8px + env(safe-area-inset-bottom));
		background: var(--sb-bg);
		transform: translateX(-100%);
		transition: transform .3s cubic-bezier(.2, .7, .2, 1);
		box-shadow: 20px 0 40px rgba(0,0,0,.5);
	}
	body.sb-menu-open .sb-sidebar { transform: translateX(0); }
	.sb-overlay {
		display: block; position: fixed; inset: 0; z-index: 90;
		background: rgba(0,0,0,.6);
		opacity: 0; pointer-events: none; transition: opacity .3s;
	}
	body.sb-menu-open .sb-overlay { opacity: 1; pointer-events: auto; }
	.sb-nav a { padding: 12px; }
	.sb-lib-item a { padding: 8px; }

	/* --- Barra superior --- */
	.sb-menu-toggle { display: grid; }
	.sb-history { display: none; }
	.sb-topbar {
		padding: calc(10px + env(safe-area-inset-top)) 12px 10px;
		gap: 10px;
	}
	.sb-circle-btn { width: 36px; height: 36px; }
	.sb-search { max-width: none; }
	.sb-search input[type="search"] { font-size: 16px; padding: 8px 14px 8px 40px; }
	.sb-search svg { left: 12px; width: 18px; height: 18px; }
	.sb-topbar-right .sb-pill.is-ghost { display: none; }
	.sb-pill { padding: 7px 14px; font-size: .8rem; white-space: nowrap; }

	/* --- Cabeceras --- */
	.sb-hero { padding: calc(78px + env(safe-area-inset-top)) 16px 16px; }
	.sb-hero h1 { font-size: 1.5rem; margin-bottom: 14px; }
	.sb-archive-hero { padding: calc(90px + env(safe-area-inset-top)) 16px 20px; }
	.sb-entry-hero {
		flex-direction: column; align-items: center; text-align: left;
		padding: calc(84px + env(safe-area-inset-top)) 16px 16px;
		min-height: 0; gap: 18px;
	}
	.sb-entry-hero > div:last-child { align-self: stretch; }
	.sb-entry-cover { width: min(64vw, 260px); height: min(64vw, 260px); }
	.sb-entry-title { font-size: 1.6rem; letter-spacing: -.5px; margin: 4px 0 10px; }
	.sb-entry-meta { font-size: .8rem; }
	.sb-actions { padding: 12px 16px 16px; gap: 20px; }
	.sb-actions .sb-play { order: 9; margin-left: auto; width: 52px; height: 52px; }
	.sb-icon-btn svg { width: 26px; height: 26px; }

	/* --- Secciones --- */
	.sb-section, .sb-content, .sb-comments, .sb-tracklist, .sb-tags, .sb-pagination { padding-left: 16px; padding-right: 16px; }
	.sb-section { padding-top: 12px; }
	.sb-section-head h2 { font-size: 1.2rem; }
	.sb-content { font-size: 1rem; }
	.sb-content .alignleft, .sb-content .alignright { float: none; margin: 1em 0; }
	.sb-content iframe { max-width: 100%; }

	/* Accesos rápidos */
	.sb-quick-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
	.sb-quick { height: 56px; border-radius: 4px; }
	.sb-quick-img { width: 56px; height: 56px; }
	.sb-quick-title { font-size: .78rem; padding: 0 8px 0 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
	.sb-quick .sb-play { display: none; }

	/* Cuadrícula normal (archivos, búsqueda) */
	.sb-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
	.sb-card { background: transparent; padding: 0; }
	.sb-card:hover { background: transparent; }
	.sb-card-cover { margin-bottom: 8px; border-radius: 4px; }
	.sb-card h3 { font-size: .9rem; }
	.sb-card p { font-size: .78rem; }

	/* Inicio en el teléfono: entradas de dos en dos hacia abajo */
	.sb-shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	/* Enlace destacado en la navegación inferior */
	.sb-mobile-nav .sb-nav-featured svg { fill: var(--sb-accent); }
	.sb-mobile-nav .sb-nav-featured.is-current svg { fill: var(--sb-accent-hover); }

	/* Lista de pistas */
	.sb-track a { grid-template-columns: 48px 1fr; padding: 6px 0; }
	.sb-track-num, .sb-track-date { display: none; }
	.sb-track-title { font-size: .95rem; }

	.comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea { font-size: 16px; }
	.sb-site-footer { padding: 24px 16px 32px; }

	/* --- Playlist en el teléfono --- */
	.sb-pl-hero {
		flex-direction: column; align-items: center;
		padding: calc(84px + env(safe-area-inset-top)) 16px 12px;
		min-height: 0; gap: 18px;
		background: linear-gradient(180deg, #1565c0 0%, var(--sb-accent-dark) 60%, var(--sb-panel) 100%);
	}
	.sb-pl-cover { width: min(62vw, 240px); height: min(62vw, 240px); }
	.sb-pl-info { align-self: stretch; }
	.sb-pl-info .sb-entry-label { display: none; }
	.sb-pl-desc { font-size: .85rem; }
	.sb-pl.sb-pl .sb-actions { background: var(--sb-panel); }
	.sb-pl .sb-actions .sb-pl-shuffle { order: 8; margin-left: auto; }
	.sb-pl .sb-actions .sb-pl-play { order: 9; margin-left: 0; }
	.sb-pl-list { padding: 0 8px 24px; }
	.sb-pl-head { display: none; }
	.sb-row {
		grid-template-columns: minmax(0, 1fr) 40px;
		height: 64px;
		gap: 8px;
		padding: 0 8px;
	}
	.sb-row:hover { background: transparent; }
	.sb-row:active { background: rgba(255,255,255,.08); }
	.sb-row.is-current { background: transparent; }
	.sb-row-num, .sb-row-album, .sb-row-date { display: none; }
	.sb-row-thumb { width: 48px; height: 48px; }
	.sb-row-thumb-play {
		position: absolute; inset: 0;
		display: none; place-items: center;
		background: rgba(0,0,0,.45);
	}
	.sb-row-thumb-play svg { width: 18px; height: 18px; fill: #fff; }
	.sb-row.is-current .sb-row-thumb-play { display: grid; }
	.sb-row.is-playing .sb-row-thumb-play svg { display: none; }
	.sb-row.is-playing .sb-row-thumb-play::after {
		content: ""; width: 14px; height: 14px;
		background:
			linear-gradient(#fff, #fff) 0 100% no-repeat,
			linear-gradient(#fff, #fff) 5px 100% no-repeat,
			linear-gradient(#fff, #fff) 10px 100% no-repeat;
		background-size: 3px 30%, 3px 90%, 3px 50%;
		animation: sb-eq .9s ease-in-out infinite alternate;
	}
	.sb-row-title { font-size: .98rem; pointer-events: none; }
	.sb-row-artist { font-size: .82rem; }
	.sb-row-more { opacity: 1; width: 40px; height: 40px; }

	/* --- Mini reproductor --- */
	.sb-player {
		grid-row: 2;
		position: relative;
		grid-template-columns: 1fr auto;
		gap: 8px;
		margin: 0 8px 4px;
		padding: 7px 8px 9px;
		border-radius: 8px;
		overflow: hidden;
		background: linear-gradient(90deg, var(--sb-accent-dark), #0a2a63);
		box-shadow: 0 -4px 24px rgba(0,0,0,.6);
		cursor: pointer;
	}
	.sb-now { gap: 10px; }
	.sb-now-thumb { width: 42px; height: 42px; }
	.sb-now-text a { font-size: .85rem; }
	.sb-now-text small { color: rgba(255,255,255,.7); font-size: .75rem; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.sb-now .sb-icon-btn { color: rgba(255,255,255,.75); padding: 6px; }
	.sb-now .sb-icon-btn svg { width: 20px; height: 20px; }
	.sb-now .sb-icon-btn.is-liked { color: var(--sb-accent-hover); }
	.sb-extra, .sb-controls-btns .sb-icon-btn { display: none; }
	.sb-controls-btns { gap: 4px; }
	.sb-controls-btns [data-sb-next] { display: grid; place-items: center; width: 40px; height: 40px; color: #fff; }
	.sb-controls-btns [data-sb-next] svg { width: 20px; height: 20px; }
	.sb-main-play { width: 40px; height: 40px; }
	.sb-progress { position: absolute; left: 8px; right: 8px; bottom: 0; max-width: none; }
	.sb-progress span { display: none; }
	.sb-progress .sb-bar { height: 2px; background: rgba(255,255,255,.2); }
	.sb-progress .sb-bar::before { display: none; }
	.sb-progress .sb-bar-fill { background: #fff; }
	.sb-progress .sb-bar-knob { display: none; }

	/* --- Navegación inferior --- */
	.sb-mobile-nav {
		grid-row: 3;
		display: flex; justify-content: space-around;
		padding: 6px 0 calc(8px + env(safe-area-inset-bottom));
		background: linear-gradient(180deg, rgba(0,0,0,.7), #000 40%);
	}
	.sb-mobile-nav a, .sb-mobile-nav button {
		flex: 1;
		display: flex; flex-direction: column; align-items: center; gap: 3px;
		padding: 4px 0;
		font-size: .68rem; font-weight: 600; font-family: inherit;
		color: var(--sb-muted); background: none; border: 0; cursor: pointer;
	}
	.sb-mobile-nav svg { width: 24px; height: 24px; fill: currentColor; }
	.sb-mobile-nav a:active, .sb-mobile-nav button:active { transform: scale(.92); }
	.sb-mobile-nav .is-current { color: var(--sb-text); }

	/* --- Reproductor a pantalla completa --- */
	.sb-np {
		display: block;
		position: fixed; inset: 0; z-index: 200;
		background: linear-gradient(180deg, #0d47a1 0%, var(--sb-accent-dark) 30%, #030a18 75%, #000 100%);
		transform: translateY(100%);
		visibility: hidden;
		transition: transform .35s cubic-bezier(.2, .7, .2, 1), visibility 0s linear .35s;
		overflow-y: auto;
		overscroll-behavior: contain;
	}
	body.sb-np-open .sb-np {
		transform: translateY(0);
		visibility: visible;
		transition: transform .35s cubic-bezier(.2, .7, .2, 1);
	}
	.sb-np.is-dragging { transition: none; }
	.sb-np-inner {
		min-height: 100%;
		display: flex; flex-direction: column;
		padding: calc(8px + env(safe-area-inset-top)) 20px calc(20px + env(safe-area-inset-bottom));
		max-width: 520px; margin: 0 auto;
	}
	.sb-np-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; }
	.sb-np-btn {
		width: 40px; height: 40px; border-radius: 50%; border: 0;
		background: none; color: #fff; display: grid; place-items: center; cursor: pointer; flex-shrink: 0;
	}
	.sb-np-btn svg { width: 24px; height: 24px; fill: currentColor; }
	.sb-np-from { text-align: center; min-width: 0; line-height: 1.25; }
	.sb-np-from small { display: block; font-size: .65rem; letter-spacing: 1px; text-transform: uppercase; color: rgba(255,255,255,.7); }
	.sb-np-from strong { font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }

	.sb-np-art {
		margin: auto 0 0;
		padding-top: 16px;
	}
	.sb-np-slot {
		position: relative;
		aspect-ratio: 1 / 1;
		width: min(100%, 46vh);
		margin: 0 auto;
		border-radius: 10px;
		overflow: hidden;
		background: linear-gradient(135deg, var(--sb-accent-dark), var(--sb-accent));
		box-shadow: 0 20px 60px rgba(0,0,0,.65);
		transform: scale(.9);
		transition: transform .45s cubic-bezier(.2, .7, .2, 1);
	}
	.sb-np.is-playing .sb-np-slot { transform: scale(1); }
	.sb-np-slot img { width: 100%; height: 100%; object-fit: cover; }
	/* Miniaturas de YouTube: se recortan las franjas negras para que queden cuadradas */
	.sb-np-slot img.is-yt {
		position: absolute; top: 50%; left: 50%;
		width: auto; height: 133.4%;
		transform: translate(-50%, -50%);
	}

	.sb-np-meta { display: flex; align-items: center; gap: 12px; margin: 28px 0 14px; }
	.sb-np-text { flex: 1; min-width: 0; }
	.sb-np-title {
		display: block; font-size: 1.35rem; font-weight: 800; line-height: 1.2; letter-spacing: -.3px;
		white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	}
	.sb-np-artist { display: block; color: rgba(255,255,255,.7); font-size: .95rem; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.sb-np-meta .sb-icon-btn { color: rgba(255,255,255,.8); }
	.sb-np-meta .sb-icon-btn svg { width: 28px; height: 28px; }
	.sb-np-meta .sb-icon-btn.is-liked { color: var(--sb-accent-hover); }

	.sb-np-progress .sb-bar { height: 4px; background: rgba(255,255,255,.25); }
	.sb-np-progress .sb-bar-fill { background: #fff; }
	.sb-np-progress .sb-bar-knob { opacity: 1; }
	.sb-np-times { display: flex; justify-content: space-between; margin-top: 8px; font-size: .72rem; color: rgba(255,255,255,.7); font-variant-numeric: tabular-nums; }

	.sb-np-controls { display: flex; align-items: center; justify-content: space-between; margin: 14px 0 6px; }
	.sb-np-controls .sb-icon-btn { color: #fff; width: 48px; height: 48px; display: grid; place-items: center; }
	.sb-np-controls .sb-icon-btn svg { width: 30px; height: 30px; }
	.sb-np-controls [data-sb-shuffle] svg, .sb-np-controls [data-sb-repeat] svg { width: 22px; height: 22px; }
	.sb-np-controls .sb-icon-btn.is-on { color: var(--sb-accent-hover); position: relative; }
	.sb-np-controls .sb-icon-btn.is-on::after {
		content: ""; position: absolute; bottom: 4px; left: 50%; width: 4px; height: 4px; margin-left: -2px;
		border-radius: 50%; background: currentColor;
	}
	.sb-np-play {
		width: 68px; height: 68px; border-radius: 50%; border: 0; cursor: pointer;
		background: #fff; display: grid; place-items: center;
		box-shadow: 0 8px 24px rgba(0,0,0,.4);
		transition: transform .12s;
	}
	.sb-np-play:active { transform: scale(.94); }
	.sb-np-play svg { width: 28px; height: 28px; fill: #000; }
	.sb-np-play .sb-ico-play svg { margin-left: 3px; }

	.sb-np-foot { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 20px; }
	.sb-np-foot a, .sb-np-foot button {
		display: inline-flex; align-items: center; gap: 8px;
		background: rgba(255,255,255,.1); border: 0; border-radius: 999px;
		color: #fff; font-family: inherit; font-size: .8rem; font-weight: 600; line-height: 1; padding: 10px 14px; cursor: pointer;
	}
	.sb-np-foot svg { width: 16px; height: 16px; fill: currentColor; }

}

/* Teléfonos en horizontal */
@media (max-width: 860px) and (orientation: landscape) and (max-height: 500px) {
	.sb-np-inner { max-width: 640px; }
	.sb-np-art { margin-top: 0; }
	.sb-np-meta { margin-top: 16px; }
}

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; animation: none !important; }
}
/* ==========================================================
   SoundBlue - Arreglo de la página 2, 3, 4... en el celular
   Pegar AL FINAL de style.css
   (o en Apariencia > Personalizar > CSS adicional)
   ========================================================== */

/* Las tarjetas ya no empujan la cuadrícula por títulos largos */
.sb-card { min-width: 0; }

@media (max-width: 860px) {
	/* Siempre dos columnas que caben en la pantalla, en todas las páginas */
	.sb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

	/* Paginación centrada y cómoda para el dedo */
	.sb-pagination { padding: 20px 16px 8px; }
	.sb-pagination .nav-links { justify-content: center; }
	.sb-pagination .page-numbers { min-width: 42px; height: 42px; }
}

/* Tarjetas: solo el título, hasta dos líneas */
.sb-card h3 {
	white-space: normal;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-bottom: 0;
}

/* Celular: sin el botón "Iniciar sesión" en la barra superior */
@media (max-width: 860px) {
	.sb-topbar-right { display: none; }
}


/* Navegación sin recargar: barra de carga arriba */
body.sb-loading::before {
	content: "";
	position: fixed;
	top: 0;
	left: 0;
	z-index: 99999;
	height: 3px;
	width: 100%;
	background: var(--sb-accent, #1e90ff);
	transform-origin: left;
	animation: sb-load 1.2s ease-out infinite;
	pointer-events: none;
}
@keyframes sb-load { 0% { transform: scaleX(0); opacity: 1; } 80% { transform: scaleX(.85); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
body.sb-loading #sb-content { opacity: .6; transition: opacity .15s; }
#sb-content:focus { outline: none; }