/* Slider con burbuja de valor (metros cuadrados, escala de urgencia) */
#ccb-cotizador-root .ccb-slider-envoltorio { position: relative; padding-top: 40px; padding-bottom: 46px; margin-bottom: 24px; }
#ccb-cotizador-root .ccb-slider-burbuja {
	position: absolute; top: 0; transform: translateX(-50%);
	background: var(--ccb-primario); color: #fff; font-weight: 700; font-size: 14px;
	padding: 6px 14px; border-radius: var(--radius-full); white-space: nowrap;
}
#ccb-cotizador-root .ccb-slider-burbuja::after {
	content: ""; position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%);
	border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid var(--ccb-primario);
}
#ccb-cotizador-root .ccb-slider {
	width: 100%; -webkit-appearance: none; appearance: none; height: 8px; border-radius: var(--radius-full);
	background: linear-gradient(to right, var(--ccb-primario) 0%, var(--ccb-primario) var(--ccb-slider-pct, 0%), var(--colors-neutral-300) var(--ccb-slider-pct, 0%), var(--colors-neutral-300) 100%);
	outline: none; cursor: pointer;
	touch-action: pan-y; /* evita que el navegador "robe" el gesto horizontal para hacer scroll (causaba que el slider se devolviera en móvil) */
}
#ccb-cotizador-root .ccb-slider::-webkit-slider-thumb {
	-webkit-appearance: none; appearance: none; width: 24px; height: 24px; border-radius: 50%;
	background: #fff; border: 3px solid var(--ccb-primario); box-shadow: 0 2px 6px rgba(0,0,0,.15); cursor: pointer;
}
#ccb-cotizador-root .ccb-slider::-moz-range-thumb {
	width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 3px solid var(--ccb-primario);
	box-shadow: 0 2px 6px rgba(0,0,0,.15); cursor: pointer;
}

/* Flecha animada que indica que el slider se puede arrastrar (desaparece al primer toque) */
#ccb-cotizador-root .ccb-slider-flecha {
	position: absolute; top: 66px; transform: translateX(-50%);
	width: 22px; height: 28px; pointer-events: none; transition: opacity .25s;
	animation: ccbFlechaRebote 1.1s ease-in-out infinite;
}
#ccb-cotizador-root .ccb-slider-flecha svg { width: 100%; height: 100%; display: block; }
#ccb-cotizador-root .ccb-slider-flecha-oculta { opacity: 0; }
@keyframes ccbFlechaRebote { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(5px); } }

/* Nota: el padding lateral que existía aquí para móvil se quitó — desincronizaba el cálculo de
   posición entre el input (ancho de su content-box) y la burbuja/flecha (posicionadas sobre el
   ancho completo del contenedor), causando que quedaran desalineadas solo en pantallas pequeñas.
   El problema real de "se pega al borde" ya lo resuelve touch-action: pan-y en .ccb-slider. */