/* TocaHits Radio Player */
.thr {
	--thr-c1: #8b5cf6;
	--thr-c2: #ff2d95;
	--thr-bg: #64027a;
	--thr-h: 76px;
	--thr-radius: 22px;
	--thr-vol: 80%;
	position: fixed;
	z-index: 99990;
	bottom: calc(14px + env(safe-area-inset-bottom, 0px));
	left: 0; right: 0;
	width: min(1000px, calc(100% - 24px));
	margin: 0 auto;
	color: #fff;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 14px;
	line-height: 1.3;
	-webkit-font-smoothing: antialiased;
	-webkit-tap-highlight-color: transparent;
	pointer-events: none;
}
.thr, .thr *, .thr *::before, .thr *::after { box-sizing: border-box; }
.thr button { font: inherit; color: inherit; margin: 0; letter-spacing: normal; text-transform: none; }
.thr svg { display: block; width: 100%; height: 100%; }

.thr-estilo-barra { bottom: 0; width: 100%; --thr-radius: 0px; }

/* ---------- Barra ---------- */
.thr-bar {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: 16px;
	height: var(--thr-h);
	padding: 0 14px 0 10px;
	border-radius: var(--thr-radius);
	background: rgba(16, 11, 26, .74);
	-webkit-backdrop-filter: blur(18px) saturate(1.5);
	backdrop-filter: blur(18px) saturate(1.5);
	box-shadow: 0 18px 50px -14px rgba(0, 0, 0, .75), inset 0 1px 0 rgba(255, 255, 255, .06);
	pointer-events: auto;
	transition: transform .45s cubic-bezier(.22, .8, .24, 1), opacity .35s ease;
}
.thr-tema-solido .thr-bar { background: var(--thr-bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
.thr-estilo-barra .thr-bar { padding-left: max(14px, calc((100% - 1200px) / 2)); padding-right: max(14px, calc((100% - 1200px) / 2)); }

/* Borde neón con degradado */
.thr-neon .thr-bar::before {
	content: "";
	position: absolute; inset: 0;
	border-radius: inherit;
	padding: 1.5px;
	background: linear-gradient(90deg, var(--thr-c1), var(--thr-c2), var(--thr-c1)) 0 0 / 200% 100%;
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
	pointer-events: none;
}
.thr-estilo-barra.thr-neon .thr-bar::before { padding: 2px 0 0; }
.thr-neon .thr-bar::after {
	content: "";
	position: absolute; inset: 0; z-index: -1;
	border-radius: inherit;
	box-shadow: 0 0 22px -6px var(--thr-c1), 0 0 30px -10px var(--thr-c2);
	opacity: .55;
	transition: opacity .5s;
	pointer-events: none;
}
.thr-neon[data-state="playing"] .thr-bar::before { animation: thr-flow 4s linear infinite; }
.thr-neon[data-state="playing"] .thr-bar::after { opacity: 1; animation: thr-glow 2.4s ease-in-out infinite; }
@keyframes thr-flow { to { background-position: 200% 0; } }
@keyframes thr-glow { 50% { opacity: .55; } }

/* ---------- Izquierda: disco + datos ---------- */
.thr-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.thr-art {
	position: relative; flex: none;
	width: 56px; height: 56px;
	border-radius: 50%;
	box-shadow: 0 0 0 2px rgba(255, 255, 255, .1), 0 6px 18px rgba(0, 0, 0, .5);
	transition: box-shadow .5s;
}
.thr-art .thr-cover {
	width: 100%; height: 100%;
	border-radius: 50%;
	object-fit: cover;
	display: block;
	animation: thr-spin 9s linear infinite paused;
}
.thr-hole {
	position: absolute; top: 50%; left: 50%;
	width: 12px; height: 12px; margin: -6px 0 0 -6px;
	border-radius: 50%;
	background: #0b0912;
	box-shadow: 0 0 0 2px rgba(255, 255, 255, .25);
}
.thr[data-state="playing"] .thr-art .thr-cover { animation-play-state: running; }
.thr[data-state="playing"] .thr-art { box-shadow: 0 0 0 2px color-mix(in srgb, var(--thr-c1) 70%, transparent), 0 0 20px -2px var(--thr-c1); }
@keyframes thr-spin { to { transform: rotate(360deg); } }

.thr-info { min-width: 0; }
.thr-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.thr-live {
	flex: none;
	display: inline-flex; align-items: center; gap: 5px;
	padding: 2px 7px;
	border-radius: 999px;
	background: rgba(255, 45, 85, .16);
	color: #ff6b88;
	font-size: 10px; font-weight: 800; letter-spacing: .08em;
}
.thr-live i { width: 6px; height: 6px; border-radius: 50%; background: #ff2d55; animation: thr-blink 1.4s infinite; }
@keyframes thr-blink { 50% { opacity: .2; } }
.thr-name { font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.thr-eq { flex: none; display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; opacity: 0; transition: opacity .3s; }
.thr-eq i { width: 3px; height: 30%; border-radius: 2px; background: linear-gradient(var(--thr-c2), var(--thr-c1)); }
.thr[data-state="playing"] .thr-eq { opacity: 1; }
.thr[data-state="playing"] .thr-eq i { animation: thr-eq .9s ease-in-out infinite alternate; }
.thr-eq i:nth-child(2) { animation-delay: -.3s !important; animation-duration: .7s !important; }
.thr-eq i:nth-child(3) { animation-delay: -.6s !important; animation-duration: 1.1s !important; }
.thr-eq i:nth-child(4) { animation-delay: -.15s !important; animation-duration: .8s !important; }
@keyframes thr-eq { from { height: 20%; } to { height: 100%; } }

.thr-song { margin-top: 3px; overflow: hidden; white-space: nowrap; font-size: 13px; color: rgba(255, 255, 255, .72); }
.thr-marquee { display: inline-block; }
.thr-song.is-long { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
.thr-song.is-long .thr-marquee { animation: thr-marquee var(--thr-mq-time, 10s) ease-in-out 1.5s infinite alternate; }
@keyframes thr-marquee { 0%, 15% { transform: translateX(0); } 85%, 100% { transform: translateX(var(--thr-shift, 0px)); } }

/* ---------- Centro: play ---------- */
.thr-center { display: flex; justify-content: center; }
.thr .thr-play {
	position: relative;
	display: grid; place-items: center;
	width: 56px; height: 56px; padding: 0;
	border: 0; border-radius: 50%;
	background: linear-gradient(135deg, var(--thr-c1), var(--thr-c2));
	color: #fff;
	cursor: pointer;
	box-shadow: 0 8px 24px -6px var(--thr-c1), inset 0 1px 0 rgba(255, 255, 255, .35);
	transition: transform .2s ease, box-shadow .3s;
}
.thr .thr-play:hover { transform: scale(1.06); box-shadow: 0 10px 30px -4px var(--thr-c1), inset 0 1px 0 rgba(255, 255, 255, .35); }
.thr .thr-play:active { transform: scale(.94); }
.thr .thr-play:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.thr-play::after {
	content: ""; position: absolute; inset: 0;
	border-radius: 50%;
	border: 2px solid var(--thr-c2);
	opacity: 0;
	pointer-events: none;
}
.thr[data-state="playing"] .thr-play::after { animation: thr-ring 2s ease-out infinite; }
.thr[data-state="stopped"] .thr-play::after { animation: thr-ring 2.6s ease-out 3s infinite; }
@keyframes thr-ring { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.55); opacity: 0; } }

.thr-icons { position: relative; width: 26px; height: 26px; }
.thr-icons svg { position: absolute; inset: 0; transition: opacity .2s, transform .2s; }
.thr-i-pause, .thr-i-load { opacity: 0; transform: scale(.6); }
.thr-i-play { transform: translateX(1px); }
.thr[data-state="playing"] .thr-i-play,
.thr[data-state="loading"] .thr-i-play { opacity: 0; transform: scale(.6); }
.thr[data-state="playing"] .thr-i-pause { opacity: 1; transform: none; }
.thr[data-state="loading"] .thr-i-load { opacity: 1; transform: none; animation: thr-rot .8s linear infinite; }
@keyframes thr-rot { to { transform: rotate(360deg); } }

/* ---------- Derecha ---------- */
.thr-right { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; }
.thr-listeners {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 6px 11px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .08);
	font-size: 12px; white-space: nowrap;
}
.thr-listeners[hidden] { display: none; }
.thr-listeners i { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 8px #22c55e; animation: thr-blink 1.6s infinite; }
.thr-listeners b { font-variant-numeric: tabular-nums; }

.thr-vol { display: flex; align-items: center; gap: 4px; }
.thr .thr-btn {
	display: grid; place-items: center; flex: none;
	width: 36px; height: 36px; padding: 8px;
	border: 0; border-radius: 50%;
	background: transparent;
	color: rgba(255, 255, 255, .85);
	cursor: pointer;
	transition: background .2s, color .2s;
}
.thr .thr-btn:hover, .thr .thr-btn:focus-visible { background: rgba(255, 255, 255, .12); color: #fff; outline: none; }
.thr-mute { position: relative; }
.thr-mute svg { position: absolute; inset: 8px; width: 20px; height: 20px; }
.thr-i-mute { opacity: 0; }
.thr.is-muted .thr-i-vol { opacity: 0; }
.thr.is-muted .thr-i-mute { opacity: 1; }

.thr .thr-range {
	-webkit-appearance: none; appearance: none;
	width: 96px; height: 4px; margin: 0; padding: 0;
	border-radius: 4px;
	background: linear-gradient(90deg, var(--thr-c1), var(--thr-c2)) 0 0 / var(--thr-vol) 100% no-repeat, rgba(255, 255, 255, .2);
	cursor: pointer;
	outline: none;
	border: 0;
}
.thr .thr-range::-webkit-slider-thumb {
	-webkit-appearance: none; appearance: none;
	width: 14px; height: 14px; border-radius: 50%;
	background: #fff; border: 0;
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--thr-c1) 35%, transparent), 0 2px 6px rgba(0, 0, 0, .4);
}
.thr .thr-range::-moz-range-thumb {
	width: 14px; height: 14px; border-radius: 50%;
	background: #fff; border: 0;
	box-shadow: 0 0 0 4px rgba(139, 92, 246, .35);
}
.thr .thr-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px #fff; }

/* ---------- Minimizado ---------- */
.thr.is-min .thr-bar { transform: translateY(calc(100% + 30px)); opacity: 0; pointer-events: none; }
.thr .thr-bubble {
	position: fixed;
	right: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px));
	width: 62px; height: 62px; padding: 0;
	border: 0; border-radius: 50%;
	background: #120d1e;
	cursor: pointer;
	pointer-events: auto;
	box-shadow: 0 0 0 2px var(--thr-c1), 0 10px 30px -6px rgba(0, 0, 0, .7), 0 0 22px -4px var(--thr-c1);
	transform: scale(0); opacity: 0;
	transition: transform .4s cubic-bezier(.34, 1.56, .64, 1) .1s, opacity .3s;
}
.thr.is-min .thr-bubble { transform: scale(1); opacity: 1; }
.thr:not(.is-min) .thr-bubble { pointer-events: none; }
.thr-bubble .thr-cover { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; animation: thr-spin 9s linear infinite paused; }
.thr[data-state="playing"] .thr-bubble .thr-cover { animation-play-state: running; }
.thr-bubble-eq {
	position: absolute; right: -2px; bottom: -2px;
	display: flex; align-items: flex-end; justify-content: center; gap: 2px;
	width: 24px; height: 24px; padding: 6px 5px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--thr-c1), var(--thr-c2));
}
.thr-bubble-eq i { width: 3px; height: 40%; border-radius: 2px; background: #fff; }
.thr[data-state="playing"] .thr-bubble-eq i { animation: thr-eq .8s ease-in-out infinite alternate; }
.thr-bubble-eq i:nth-child(2) { animation-delay: -.3s !important; }
.thr-bubble-eq i:nth-child(3) { animation-delay: -.55s !important; }

/* ---------- Aviso "seguir escuchando" ---------- */
.thr .thr-resume {
	position: absolute; left: 50%; bottom: calc(100% + 12px);
	display: inline-flex; align-items: center; gap: 8px;
	padding: 10px 18px;
	border: 0; border-radius: 999px;
	background: linear-gradient(135deg, var(--thr-c1), var(--thr-c2));
	color: #fff; font-weight: 700; font-size: 14px; white-space: nowrap;
	cursor: pointer; pointer-events: auto;
	box-shadow: 0 10px 30px -8px var(--thr-c1);
	transform: translateX(-50%);
	animation: thr-bounce 1.6s ease-in-out infinite;
}
.thr .thr-resume[hidden] { display: none; }
.thr-resume-dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: thr-blink 1s infinite; }
@keyframes thr-bounce { 50% { transform: translateX(-50%) translateY(-5px); } }
.thr.is-min .thr-resume { left: auto; right: 18px; bottom: 92px; transform: none; animation: none; position: fixed; }

.thr-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Espacio para que el contenido no quede tapado */
html.thr-on body { padding-bottom: var(--thr-space, 104px); }
html.thr-on.thr-min-on body { padding-bottom: 0; }

/* ---------- Celular ---------- */
@media (max-width: 720px) {
	.thr { --thr-h: 66px; --thr-radius: 18px; width: calc(100% - 14px); bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
	.thr-estilo-barra { width: 100%; bottom: 0; --thr-radius: 0px; }
	.thr-bar { grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; padding: 0 6px 0 8px; }
	.thr-art { width: 48px; height: 48px; }
	.thr-name { font-size: 14px; }
	.thr-song { font-size: 12px; }
	.thr .thr-play { width: 50px; height: 50px; }
	.thr-icons { width: 22px; height: 22px; }
	.thr-vol, .thr .thr-pop, .thr-listeners { display: none !important; }
	.thr-right { gap: 0; }
	.thr .thr-bubble { right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); width: 56px; height: 56px; }
	.thr .thr-resume { font-size: 13px; padding: 9px 16px; }
	html.thr-on body { padding-bottom: var(--thr-space, 86px); }
}
@media (max-width: 480px) {
	.thr-live { padding: 0; background: none; font-size: 0; gap: 0; }
	.thr-live i { width: 8px; height: 8px; }
}

/* ---------- Ventana flotante (popup) ---------- */
body.thr-ventana-body {
	margin: 0; min-height: 100vh;
	display: grid; place-items: center;
	background: radial-gradient(circle at 30% 20%, #2a1450, #0b0812 70%);
	overflow: hidden;
}
.thr-ventana { position: static; width: 100%; max-width: 420px; padding: 18px; pointer-events: auto; }
.thr-ventana .thr-bar {
	display: flex; flex-direction: column; align-items: center;
	height: auto; gap: 18px;
	padding: 28px 24px 22px;
	--thr-radius: 26px;
	border-radius: 26px;
}
.thr-ventana .thr-left { flex-direction: column; text-align: center; gap: 16px; width: 100%; }
.thr-ventana .thr-art { width: min(220px, 60vw); height: min(220px, 60vw); }
.thr-ventana .thr-hole { width: 26px; height: 26px; margin: -13px 0 0 -13px; }
.thr-ventana .thr-top { justify-content: center; }
.thr-ventana .thr-name { font-size: 20px; }
.thr-ventana .thr-info { width: 100%; }
.thr-ventana .thr-song { font-size: 14px; text-align: center; }
.thr-ventana .thr-song.is-long { text-align: left; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.thr-ventana .thr-play { width: 68px; height: 68px; }
.thr-ventana .thr-icons { width: 30px; height: 30px; }
.thr-ventana .thr-right { justify-content: center; flex-wrap: wrap; gap: 14px; }
.thr-ventana .thr-vol, .thr-ventana .thr-listeners { display: flex !important; }
.thr-ventana .thr-listeners[hidden] { display: none !important; }

/* ---------- Vista previa en el panel ---------- */
.thr-preview-stage .thr { position: relative; bottom: auto; width: 100%; max-width: 1000px; }
.thr-preview-stage .thr-estilo-barra { max-width: none; }
.thr-preview-stage .thr-bubble, .thr-preview-stage .thr-resume { display: none; }

@media (prefers-reduced-motion: reduce) {
	.thr *, .thr *::before, .thr *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- Navegación sin cortes: marco seguro ---------- */
.thr-marco {
	position: fixed; inset: 0;
	width: 100%; height: 100%;
	border: 0; margin: 0; padding: 0;
	z-index: 99980;
	background: #000;
	opacity: 0;
	transition: opacity .2s ease;
}
html.thr-shell-ready .thr-marco { opacity: 1; }
html.thr-shell-ready, html.thr-shell-ready body { overflow: hidden !important; }
html.thr-shell-ready body { padding-bottom: 0 !important; }
html.thr-shell-ready body > *:not(#thr-player):not(.thr-marco) { visibility: hidden !important; }

/* Dentro del marco: sin segundo reproductor, solo el espacio para la barra */
html.thr-en-marco #thr-player { display: none !important; }
html.thr-en-marco body { padding-bottom: var(--thr-space, 104px); }
html.thr-en-marco.thr-min-on body { padding-bottom: 0; }

.thr-progress {
	position: fixed; top: 0; left: 0;
	height: 3px; width: 0;
	z-index: 100000;
	background: linear-gradient(90deg, var(--thr-c1), var(--thr-c2));
	box-shadow: 0 0 10px var(--thr-c1);
	opacity: 0;
	pointer-events: none;
}
.thr-progress.is-on { width: 85%; opacity: 1; transition: width 3s cubic-bezier(.1, .7, .2, 1), opacity .2s; }
.thr-progress.is-done { width: 100%; opacity: 0; transition: width .25s ease, opacity .4s ease .2s; }