/* XMS Before/After Slider — estilos aislados, sin dependencias externas */

.xmsba-container {
	--xmsba-handle-color: #002991;
	/* Controlables desde el panel de Elementor (Estilo → Flechas del
	   control). Estos valores son el default cuando el usuario no toca
	   esos controles — coinciden con el ícono tal como viene en el HTML. */
	--xmsba-arrow-size: 18px;
	--xmsba-arrow-thickness: 2.5;
	--xmsba-arrow-spacing: 0px;
	position: relative;
	display: block;
	width: 100%;
	overflow: hidden;
	border-radius: 12px;
	user-select: none;
	touch-action: pan-y;
	cursor: ew-resize;
	outline: none;
	-webkit-tap-highlight-color: transparent; /* evita el flash gris al tocar en Android */
}

/* Alto garantizado vía el truco clásico de padding-top, en vez de
   depender solo de "aspect-ratio". Dentro de columnas/containers de
   Elementor en mobile, "aspect-ratio" puede no resolver el alto a
   tiempo (o quedar en 0) si el ancho del padre todavía no está
   definido en el primer render — el padding-top SIEMPRE se calcula
   sobre el ancho del propio elemento, sin ese problema de timing en
   contextos flex/grid anidados. */
.xmsba-container::before {
	content: "";
	display: block;
	width: 100%;
}
.xmsba-container[data-ratio="16-9"]::before { padding-top: 56.25%; }
.xmsba-container[data-ratio="4-3"]::before  { padding-top: 75%; }
.xmsba-container[data-ratio="1-1"]::before  { padding-top: 100%; }
.xmsba-container[data-ratio="3-4"]::before  { padding-top: 133.3333%; }

/* Respaldo extra: si por cualquier motivo el ::before tampoco alcanza
   a calcular el alto en el primer paint en mobile, esto evita que el
   contenedor colapse a 0px por completo. */
@media (max-width: 767px) {
	.xmsba-container { min-height: 220px; }
}

.xmsba-container:focus-visible {
	box-shadow: 0 0 0 3px var(--xmsba-handle-color);
}

.xmsba-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 1; /* blindaje: evita que estilos globales de imágenes del tema alteren el stacking */
}

.xmsba-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	pointer-events: none;
}

/* La capa "after" se recorta dinámicamente vía JS con clip-path */
.xmsba-image--after {
	clip-path: inset(0 0 0 50%);
	z-index: 2;
}

.xmsba-tag {
	position: absolute;
	top: 12px;
	padding: 6px 14px;
	border-radius: 999px;
	font-family: inherit;
	font-size: clamp(0.75rem, 1.5vw, 0.875rem);
	font-weight: 600;
	letter-spacing: 0.02em;
	background: rgba(0, 0, 0, 0.72); /* valor de respaldo — editable desde Estilo → Etiquetas (Before/After) */
	color: #ffffff;
	pointer-events: none;
	white-space: nowrap;
	z-index: 3;
}

.xmsba-tag--before { left: 12px; }
.xmsba-tag--after  { right: 12px; }

.xmsba-handle {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 3px;
	background: #ffffff;
	transform: translateX(-50%);
	pointer-events: none;
	box-shadow: 0 0 6px rgba(0, 0, 0, 0.35);
	z-index: 4;
}

/* Tamaño y grosor de las flechas, editables desde Elementor. El
   atributo width/height/stroke-width del SVG en el HTML es solo un
   fallback para cuando el CSS no cargó; esta regla SIEMPRE gana
   cuando el CSS sí carga, porque una propiedad CSS declarada en hoja
   de estilos tiene más prioridad que un atributo de presentación SVG. */
.xmsba-arrow-icon {
	width: var(--xmsba-arrow-size);
	height: var(--xmsba-arrow-size);
	stroke-width: var(--xmsba-arrow-thickness);
}

/* Separación entre las dos flechas: cada una se empuja simétricamente
   hacia afuera desde su posición nativa en el ícono. Nota: el ícono
   vive en un viewBox fijo de 24 unidades y cada flecha ya tiene ~3
   unidades de margen hasta el borde — el control en Elementor topa en
   3px para no recortarlas. */
.xmsba-arrow-icon__left  { transform: translateX(calc(-1 * var(--xmsba-arrow-spacing))); }
.xmsba-arrow-icon__right { transform: translateX(var(--xmsba-arrow-spacing)); }

.xmsba-handle-btn {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--xmsba-handle-color);
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
	z-index: 5;
}

/* WCAG 2.5.5 / Apple HIG piden mínimo 44x44px de objetivo táctil —
   sube a 44px en mobile en vez de encoger. */
@media (max-width: 480px) {
	.xmsba-handle-btn { width: 44px; height: 44px; }
	.xmsba-tag { top: 8px; padding: 5px 10px; }
}

/* Respeta preferencia de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
	.xmsba-image--after,
	.xmsba-handle,
	.xmsba-handle-btn {
		transition: none !important;
	}
}