:root { color-scheme: dark; }
* { box-sizing: border-box; }
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; margin: 0; background: #000; color: #e5e5e5; overflow-x: hidden; }
.container { max-width: 700px; margin: 2rem auto; padding: 1rem; }
h1 { margin-top: 0; font-size: 1.6rem; }
.brand { display: flex; justify-content: center; align-items: center; margin-bottom: .5rem; padding: 0 .75rem; }
.brand img { max-width: min(240px, 90vw); width: 100%; height: auto; object-fit: contain; }
.player { display: flex; gap: .5rem; align-items: center; margin-bottom: 1rem; }
.btn { padding: .6rem .9rem; border: 1px solid #ffffff33; border-radius: .5rem; background: #1a1a1a; color: #f2f2f2; cursor: pointer; }
.btn[disabled] { opacity: .6; cursor: not-allowed; }
.btn--play { background: #11331f; color: #a8e6b0; border-color: #2c5b40; }
.btn--play:hover { background: #163e27; }
.btn--stop { background: #1a1a1a; color: #e5e5e5; }
.btn--ghost { background: transparent; border-color: transparent; color: inherit; opacity: .7; }
.btn--ghost:hover { opacity: 1; }
.btn--xs { padding: .2rem .35rem; font-size: .85rem; line-height: 1; }
.vol { margin-left: auto; display: flex; align-items: center; gap: .4rem; }
.meta { border: 1px solid #ffffff26; border-radius: .5rem; padding: .75rem; background: #0a0a0a; }
.row { margin: .2rem 0; }
.label { opacity: .7; margin-right: .35rem; }
.small { font-size: .9rem; opacity: .8; }

/* Historial */
.history { margin-top: 1rem; }
.history ul { margin: .4rem 0 0; padding-left: 1.2rem; list-style: none; padding-left: 0; }
.history li { margin: .15rem 0; font-size: .95rem; overflow-wrap: anywhere; }
.history .h-artist { color: #f2f2f2; font-weight: 600; }
.history .h-title { color: #cfcfcf; }
.history .h-when { color: #9a9a9a; font-size: .85em; }
.history .h-sep { color: #bdbdbd; }
.history-pager { display: flex; align-items: center; gap: .4rem; margin-top: .5rem; }

/* Responsive */
@media (max-width: 600px) {
	.container { padding: .75rem; margin: 1rem auto; }
	.player { gap: .4rem; flex-wrap: wrap; }
	/* En móvil, ocultamos el control de volumen; el sistema gestiona el volumen */
	.vol { display: none; }
	.btn { padding: .5rem .75rem; }
	.meta { font-size: 1rem; }
	.history li { font-size: .95rem; }
}

/* Slider de volumen (tema oscuro) */
.vol input[type="range"] {
	-webkit-appearance: none;
	appearance: none;
	width: 180px;
	height: 6px;
	background: #1f1f1f;
	border-radius: 999px;
	outline: none;
}
.vol input[type="range"]:focus { outline: none; }

/* WebKit */
.vol input[type="range"]::-webkit-slider-runnable-track {
	height: 6px;
	background: linear-gradient(90deg, #e5e5e5 0 0) no-repeat #1f1f1f;
	border-radius: 999px;
}
.vol input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	margin-top: -5px; /* centra el thumb en track de 6px */
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #f2f2f2;
	border: 2px solid #2a2a2a;
	cursor: pointer;
	transition: transform .08s ease;
}
.vol input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.05); }
.vol input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.1); }

/* Firefox */
.vol input[type="range"]::-moz-range-track {
	height: 6px;
	background: #1f1f1f;
	border: none;
	border-radius: 999px;
}
.vol input[type="range"]::-moz-range-progress {
	height: 6px;
	background: #e5e5e5;
	border-radius: 999px;
}
.vol input[type="range"]::-moz-range-thumb {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #f2f2f2;
	border: 2px solid #2a2a2a;
	cursor: pointer;
	transition: transform .08s ease;
}
.vol input[type="range"]:hover::-moz-range-thumb { transform: scale(1.05); }
.vol input[type="range"]:active::-moz-range-thumb { transform: scale(1.1); }