/* --- Slider doble (dos manijas, un solo eje) --- */
.dualRange{
	position: relative;
	height: 24px;
	width: 100%;
}

.dualRange-track{
	position: absolute;
	top: 50%; left: 0; right: 0;
	height: 4px;
	transform: translateY(-50%);
	background: #444;
	border-radius: 2px;
}

.dualRange-fill{
	position: absolute;
	top: 50%; height: 4px;
	transform: translateY(-50%);
	background: #5fd0a8;
	border-radius: 2px;
}

/* Los dos <input type=range> se superponen exactamente en el mismo lugar */
.dualRange input[type=range]{
	position: absolute;
	top: 0; left: 0;
	width: 100%;
	margin: 0;
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
	pointer-events: none; /* el track no capta clicks, solo la manija */
}

/* Thumb (la "bolita") - Chrome/Edge/Safari */
.dualRange input[type=range]::-webkit-slider-thumb{
	-webkit-appearance: none;
	pointer-events: auto; /* la manija si es clickeable/arrastrable */
	width: 14px; height: 14px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid #5fd0a8;
	cursor: pointer;
	margin-top: 0;
}

/* Thumb - Firefox */
.dualRange input[type=range]::-moz-range-thumb{
	pointer-events: auto;
	width: 14px; height: 14px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid #5fd0a8;
	cursor: pointer;
}
.dualRange input[type=range]::-moz-range-track{
	background: transparent;
}