/**
 * Barra inferior fija de "El Ecomensajero Digital" (T-16). Carga en TODO
 * el sitio (ver inc/ecomensajero-bar.php), con sus propios tokens de
 * marca en vez de depender de home-sections.css, que no se encola en
 * todas las páginas.
 *
 * Colores y tipografía: mismos que el panel de newsletter de la portada
 * (verde oscuro de marca + botón lima), no el cian de la referencia de
 * alimentaria.com que dio el cliente — esa referencia era solo de
 * comportamiento (barra fija, aparece al interactuar), no de estilo.
 */

.bc-ecomensajero-bar {
	--bc-eco-green-800: var(--ast-global-color-7, #013F30);
	--bc-eco-lime-500: var(--ast-global-color-8, #C2D600);

	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 400;
	box-sizing: border-box;
	padding: 14px max(16px, env(safe-area-inset-left)) calc(14px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-right));
	background: var(--bc-eco-green-800);
	box-shadow: 0 -8px 28px rgba(1, 20, 15, .22);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

	/* Oculta y fuera de pantalla hasta que el JS decide mostrarla — ver
	   assets/js/ecomensajero-bar.js. Si el JS no llega a correr, el
	   atributo [hidden] de abajo la mantiene completamente fuera (nunca
	   aparece, nunca intercepta clics): no es contenido imprescindible,
	   es una mejora progresiva. */
	transform: translateY(100%);
	opacity: 0;
	pointer-events: none;
	transition: transform .5s cubic-bezier(.22, 1, .36, 1), opacity .4s ease;
}

/* Lección del bug del carrusel de fotos del bento (ver
   tareas_septiembre.md § 11.5): un [hidden] por sí solo no basta si hay
   una regla de la hoja de estilos del autor fijando otra propiedad de
   visualización — aquí no debería hacer falta porque el estado oculto ya
   lo da transform/opacity/pointer-events arriba, pero se deja como red de
   seguridad barata. */
.bc-ecomensajero-bar[hidden] {
	display: none;
}

.bc-ecomensajero-bar.is-visible {
	transform: translateY(0);
	opacity: 1;
	pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
	.bc-ecomensajero-bar {
		transition: none;
	}
}

/* Una sola fila centrada: [texto + CTA]. El botón de cerrar NO está aquí
   dentro: es hijo directo de la barra y va en absoluto arriba a la
   derecha, así que no participa del flex ni descentra el contenido. */
.bc-ecomensajero-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	width: 100%;
	max-width: 900px;
	margin: 0 auto;
	padding: 0 44px;
	box-sizing: border-box;
}

.bc-ecomensajero-texto {
	flex: 0 1 auto;
	min-width: 0;
	max-width: 620px;
	margin: 0;
	font-size: 14px;
	line-height: 1.4;
	color: rgba(255, 255, 255, .92);
}

.bc-ecomensajero-texto a {
	color: #fff;
	text-decoration: underline;
}

.bc-ecomensajero-cta {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 38px;
	padding: 0 18px;
	border-radius: 999px;
	background: var(--bc-eco-lime-500);
	color: var(--bc-eco-green-800);
	font-weight: 700;
	font-size: 13.5px;
	white-space: nowrap;
	text-decoration: none;
	transition: transform .2s ease;
}

.bc-ecomensajero-cta:hover {
	transform: translateY(-1px);
}

/* El botón de cerrar "se veía fatal" porque heredaba el aspecto por
   defecto del <button> del navegador (padding, borde, línea base propios)
   por encima de width/height/border-radius: 50% — con eso puesto, un
   `<button>` normal no sale redondo ni centrado, sale con el icono
   descuadrado dentro de una caja con su propio padding interno. Reseteado
   del todo (appearance/padding/margin/font/line-height) antes de aplicar
   el círculo. */
.bc-ecomensajero-close {
	position: absolute;
	top: 50%;
	right: max(12px, env(safe-area-inset-right));
	transform: translateY(-50%);
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
	padding: 0;
	font: inherit;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: none;
	background: rgba(255, 255, 255, .12);
	color: #fff;
	cursor: pointer;
	transition: background .15s ease;
}

.bc-ecomensajero-close:hover {
	background: rgba(255, 255, 255, .22);
}

@media (max-width: 560px) {
	.bc-ecomensajero-inner {
		flex-direction: column;
		gap: 8px;
	}

	.bc-ecomensajero-texto {
		max-width: none;
		font-size: 13px;
	}
}