/*!
 * Cinetide Player — skin «Neón» (gráfica). Recursos: icons-dark.png,
 * icons-light.png (originales, GPL-2.0-or-later; ver docs/LICENCIAS.md).
 * Trazos luminosos, barra sólida con borde resplandeciente.
 */

.ctp-skin-neon.ctp-theme-dark {
	--ctp-bg: #0a0612;
	--ctp-panel: #120a1f;
	--ctp-panel-2: #1a0f2c;
	--ctp-text: #f3eaff;
	--ctp-muted: #a99bc4;
	--ctp-border: rgba(255, 45, 149, 0.22);
	--ctp-hover: rgba(127, 246, 255, 0.07);
	--ctp-shadow: 0 0 0 1px rgba(255, 45, 149, 0.35), 0 0 28px rgba(255, 45, 149, 0.25);
}

.ctp-skin-neon.ctp-theme-light {
	--ctp-bg: #fff8fc;
	--ctp-panel: #fdeef6;
	--ctp-panel-2: #fbe1ef;
	--ctp-text: #2a0a1c;
	--ctp-muted: #8a5a74;
	--ctp-border: rgba(204, 0, 105, 0.2);
	--ctp-hover: rgba(204, 0, 105, 0.05);
	--ctp-bar-fg: #2a0a1c;
	--ctp-track: rgba(42, 10, 28, 0.18);
	--ctp-shadow: 0 0 0 1px rgba(204, 0, 105, 0.25), 0 10px 26px rgba(204, 0, 105, 0.15);
}

.ctp-skin-neon.ctp-theme-dark .ctp-ico {
	background-image: url(icons-dark.png);
}

.ctp-skin-neon.ctp-theme-light .ctp-ico {
	background-image: url(icons-light.png);
}

.ctp-skin-neon .ctp-controls {
	background: rgba(10, 6, 18, calc(0.9 * var(--ctp-bar-alpha, 1)));
	border-top: 1px solid var(--ctp-accent);
	box-shadow: 0 -2px 14px color-mix(in srgb, var(--ctp-accent) 55%, transparent);
	padding-top: 8px;
}

.ctp-skin-neon.ctp-theme-light .ctp-controls {
	background: rgba(255, 248, 252, calc(0.92 * var(--ctp-bar-alpha, 1)));
}

.ctp-skin-neon .ctp-controls .ctp-btn:hover {
	background: transparent;
	filter: drop-shadow(0 0 6px var(--ctp-accent));
}

.ctp-skin-neon .ctp-range::-webkit-slider-runnable-track {
	box-shadow: 0 0 8px color-mix(in srgb, var(--ctp-accent) 70%, transparent);
}

.ctp-skin-neon .ctp-range::-webkit-slider-thumb {
	background: var(--ctp-accent);
	box-shadow: 0 0 10px var(--ctp-accent);
}

.ctp-skin-neon .ctp-bigplay {
	background: transparent;
	border: 2px solid var(--ctp-accent);
	box-shadow: 0 0 18px var(--ctp-accent), inset 0 0 14px color-mix(in srgb, var(--ctp-accent) 60%, transparent);
}

.ctp-skin-neon .ctp-item.is-active {
	box-shadow: inset 0 0 18px color-mix(in srgb, var(--ctp-active, var(--ctp-accent)) 35%, transparent);
}

.ctp-skin-neon .ctp-item.is-active .ctp-item-title {
	text-shadow: 0 0 8px color-mix(in srgb, var(--ctp-active, var(--ctp-accent)) 70%, transparent);
}

.ctp-skin-neon .ctp-thumb {
	box-shadow: 0 0 0 1px var(--ctp-border);
}