/**
 * Beneficio en el catálogo (fuera de /perfil/): badge en el listado de
 * tienda y aviso en la ficha de producto. Ambos se pintan SOLO para un
 * beneficiario logueado con convenio utilizable — ver class-wconv-catalogo.php.
 *
 * El color no es fijo: cada elemento trae su propio --wconv-color en
 * `style` (mismo nombre de variable que ya usa cuenta.css en el selector de
 * institución, para no tener dos convenciones distintas), tomado de
 * WConv_Convenio::color(). #137A46 es solo el valor de reserva si algún
 * convenio no tiene color propio — es el mismo verde "ok" que ya usa
 * walon-mi-cuenta (mi-cuenta.css --ok).
 *
 * El color de un convenio puede ser claro (el amarillo de un logo real, no
 * solo el azul oscuro por defecto), así que el texto sobre relleno sólido NO
 * es blanco fijo: viene ya resuelto desde PHP en --wconv-color-texto
 * (wconv_color_contraste) y, para texto sobre blanco, en --wconv-color-legible
 * (wconv_color_legible) — ver funciones.php.
 *
 * No hay tokens de color globales en el tema (astra-child/inc/css/walon-fonts.css
 * solo define tipografía: --w-font-body, --w-font-head, --w-wt-*).
 */

/* ============ Badge en el listado (tienda / categoría) ============
 * Misma mecánica que .walon-badge--nuevo (posición absoluta sobre la tarjeta
 * de producto), esquina opuesta para que ambos badges puedan convivir sin
 * pisarse si un producto fuera nuevo y tuviera convenio a la vez.
 */
.woocommerce ul.products li.product {
	position: relative;
}

/* catalogo.js reubica este badge dentro de .astra-shop-thumbnail-wrap (el
 * contenedor propio de la imagen, separado del precio/título de abajo) antes
 * de que se vea: nace fuera de ahí porque el hook que lo imprime
 * (woocommerce_before_shop_loop_item) se ejecuta antes de que Astra abra ese
 * contenedor. Anclado abajo y no arriba: en las fotos de producto tipo
 * retrato (modelo con la prenda puesta) la cara suele estar en el tercio
 * superior de la imagen, y un badge arriba se la tapaba. */
.walon-badge--convenio {
	position: absolute;
	bottom: 10px;
	right: 0;
	top: auto;
	margin: 0;
	z-index: 50;
	padding: 5px 10px;
	background: var(--wconv-color, #137A46);
	border-radius: 0;
	box-sizing: border-box;
	color: var(--wconv-color-texto, #fff);
	font-size: 12px;
	letter-spacing: 0.04em;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	font-family: var(--w-font-body);
	font-weight: var(--w-wt-medium, 500);
}

@media (max-width: 544px) {
	.walon-badge--convenio {
		bottom: 8px;
		right: 0;
		padding: 4px 7px;
		font-size: 10px;
	}
}

/* ============ Precio con convenio integrado (ficha de producto) ============
 * Reemplaza al aviso en caja que vivía entre talla y "Añadir al carrito"
 * (retirado 2026-09-17: esa zona ya la usan otras promos del sitio —
 * walon-pdp-benefits-natacion-tapones.php, por ejemplo— y se sentía
 * reciclada). Ahora es una segunda línea DENTRO de <p class="price">,
 * agregada por WConv_Catalogo::precio_html()/variacion_datos() — se ve
 * donde el cliente ya está mirando cuánto va a pagar, no en un cajón aparte.
 *
 * display:block la separa del precio tachado/vigente de arriba sin
 * necesitar envolver nada en un contenedor propio: el precio de WooCommerce
 * es <p class="price">{regular}{oferta}<span esto></span></p>, así que un
 * <br> implícito por el display:block alcanza.
 */
.wconv-precio-linea {
	display: block;
	margin-top: 4px;
	font-family: var(--w-font-body);
	font-size: 13.5px;
	font-weight: var(--w-wt-medium, 500);
	color: var(--wconv-color-legible, #137A46);
}

.wconv-precio-linea strong {
	font-weight: var(--w-wt-heavy, 800);
}

.wconv-precio-chip {
	display: inline-block;
	margin-left: 2px;
	padding: 2px 8px;
	border-radius: 20px;
	background: var(--wconv-color, #137A46);
	color: var(--wconv-color-texto, #fff);
	font-size: 11px;
	font-weight: var(--w-wt-heavy, 800);
	letter-spacing: 0.02em;
	vertical-align: 1px;
}

@media (max-width: 544px) {
	.wconv-precio-linea {
		font-size: 12.5px;
	}

	.wconv-precio-chip {
		font-size: 10px;
		padding: 1px 7px;
	}
}