/*
 * Barra flotante inferior de móvil: píldora oscura translúcida con WhatsApp,
 * carrito y «subir».
 *
 * Solo existe por debajo de 1024px, que es el mismo corte en el que la
 * cabecera pasa a su forma móvil. Por encima no se pinta nada: el escritorio
 * ya tiene el carrito en la cabecera y la burbuja de WhatsApp del plugin.
 */

.ccmts-barra {
	--ccmts-barra-fondo: rgba( 22, 22, 22, .82 );
	--ccmts-barra-borde: rgba( 255, 255, 255, .14 );
	--ccmts-barra-tinta: #fff;
	--ccmts-barra-realce: rgba( 255, 255, 255, .13 );
	--ccmts-barra-rojo: #e60000;
	--ccmts-barra-alto: 56px;

	display: none;
}

@media ( max-width: 1024px ) {

	.ccmts-barra {
		position: fixed;
		left: 50%;
		transform: translateX( -50% );
		/* El inset del área segura evita que la barra quede debajo de la
		   franja del gesto de inicio en los iPhone sin botón. */
		bottom: calc( 12px + env( safe-area-inset-bottom, 0px ) );
		z-index: 999999997;
		display: block;
		pointer-events: none;
	}

	.ccmts-barra__pildora {
		display: flex;
		align-items: center;
		gap: 4px;
		padding: 4px;
		border-radius: 999px;
		background: var( --ccmts-barra-fondo );
		border: 1px solid var( --ccmts-barra-borde );
		box-shadow: 0 8px 28px rgba( 0, 0, 0, .34 );
		/* Sin `backdrop-filter` la píldora sigue siendo legible: el fondo ya
		   es opaco al 82%. El desenfoque es adorno, no estructura. */
		-webkit-backdrop-filter: blur( 14px );
		backdrop-filter: blur( 14px );
		pointer-events: auto;
	}

	/*
	 * El reset del boton va con `!important` a propósito.
	 *
	 * «Subir» es un `<button>`, y el kit de Elementor de este sitio estiliza
	 * TODOS los `button`: medido en dev el 31-ago salía con
	 * `border: 1px solid #cc3366`, `color: #cc3366`, `border-radius: 3px` y
	 * `padding: 8px 16px` — un recuadro rosa alrededor de la flecha, dentro de
	 * una píldora negra. Esas reglas viven en una hoja de otro origen que no se
	 * puede leer desde la página, así que no hay forma de calcular qué
	 * especificidad haría falta para ganarles sin adivinar. Se fija el reset y
	 * se acabó; son cuatro propiedades de un botón que no se parece a ningún
	 * otro del sitio.
	 */
	.ccmts-barra .ccmts-barra__boton {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		width: var( --ccmts-barra-alto ) !important;
		height: var( --ccmts-barra-alto ) !important;
		min-height: 0 !important;
		flex: 0 0 auto;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		border-radius: 999px !important;
		background: transparent !important;
		box-shadow: none !important;
		color: var( --ccmts-barra-tinta ) !important;
		font-size: 0;
		text-decoration: none;
		cursor: pointer;
		-webkit-appearance: none;
		appearance: none;
		-webkit-tap-highlight-color: transparent;
		transition: background-color .18s ease, transform .18s ease;
	}

	/* El realce redondeado del elemento pulsado, como en la referencia. */
	.ccmts-barra .ccmts-barra__boton:active,
	.ccmts-barra .ccmts-barra__boton:focus-visible {
		background: var( --ccmts-barra-realce ) !important;
	}

	.ccmts-barra .ccmts-barra__boton:active {
		transform: scale( .94 );
	}

	.ccmts-barra .ccmts-barra__boton:focus-visible {
		outline: 2px solid var( --ccmts-barra-tinta );
		outline-offset: -2px;
	}

	.ccmts-barra__icono {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 24px;
		height: 24px;
	}

	.ccmts-barra__icono svg {
		width: 24px;
		height: 24px;
		display: block;
	}

	/* El icono del carrito viene del header, que lo pinta con trazo. */
	.ccmts-barra__boton--carrito .ccmts-barra__icono svg {
		fill: none;
		stroke: currentColor;
		stroke-width: 1.7;
		stroke-linecap: round;
		stroke-linejoin: round;
	}

	.ccmts-barra__globo {
		position: absolute;
		top: 8px;
		right: 8px;
		min-width: 18px;
		height: 18px;
		padding: 0 5px;
		border-radius: 999px;
		background: var( --ccmts-barra-rojo );
		color: #fff;
		font-size: 11px;
		font-weight: 700;
		line-height: 18px;
		text-align: center;
		box-shadow: 0 0 0 2px var( --ccmts-barra-fondo );
	}

	/* El JS del cajón pone y quita `hidden`; sin esto el globo vacío deja un
	   punto rojo colgando cuando el carrito está vacío. */
	.ccmts-barra__globo[hidden] {
		display: none;
	}

	/*
	 * «Subir» nace plegado y el JS lo despliega al bajar. El reposo se declara
	 * con `max-width: 0` y no con `none`: de `none` a un valor el navegador no
	 * interpola y el plegado saldría de golpe pese al `transition`.
	 */
	.ccmts-barra .ccmts-barra__boton--subir {
		max-width: 0 !important;
		opacity: 0;
		overflow: hidden;
		pointer-events: none;
		transition: max-width .22s cubic-bezier( .2, 0, .13, 1 ), opacity .18s ease;
	}

	.ccmts-barra .ccmts-barra__boton--subir.is-visible {
		max-width: var( --ccmts-barra-alto ) !important;
		opacity: 1;
		pointer-events: auto;
	}

	/*
	 * El pie no puede quedar debajo de la barra. Se resuelve con `:has()` para
	 * que no dependa de JavaScript: si el marcado está, el hueco está.
	 */
	body:has( .ccmts-barra ) {
		padding-bottom: calc( var( --ccmts-barra-alto, 56px ) + 24px + env( safe-area-inset-bottom, 0px ) );
	}

	/*
	 * Dos botones de WhatsApp en la misma esquina serían un error de bulto: con
	 * el interruptor puesto, la burbuja del plugin se esconde en este ancho y
	 * solo en este ancho. En escritorio sigue tal cual.
	 */
	body:has( .ccmts-barra--sin-burbuja ) .wa__btn_popup,
	body:has( .ccmts-barra--sin-burbuja ) .wa__popup_chat_box {
		display: none !important;
	}
}

@media ( prefers-reduced-motion: reduce ) {

	.ccmts-barra .ccmts-barra__boton,
	.ccmts-barra .ccmts-barra__boton--subir {
		transition: none;
	}
}