/**
 * Badge de oferta: mas pequeno, menos solape con la foto, verde de marca.
 * Ver el porque completo (medidas antes/despues, las tres reglas con las que compite) en
 * `includes/shop/na-oferta-badge.php`.
 *
 * `!important` en TODAS las propiedades a proposito: el badge lo pintan tres sistemas
 * distintos (WooCommerce core, el kit de Elementor por plantilla, y un parche del propio
 * kit para el widget de imagenes), y cada uno de ellos ya usaba fondos e incluso algun
 * `!important` propio. Un selector plano sin `!important` ganaria en unas plantillas y
 * perderia en otras, que es justo el problema que hay hoy (colores distintos en /tienda/
 * y en la ficha con el MISMO markup). Selector plano `.onsale` / `span.onsale`, sin ID de
 * plantilla de Elementor: sobrevive a que se cree una pagina nueva con el widget.
 */

/* 2-sep-2026 — EL TEXTO SE SALIA DEL CIRCULO. Medido en /tienda/ a 1440: el circulo
   media 40 px pero «¡Oferta!» a 12 px necesitaba 46 px de `scrollWidth`, y como el
   badge no recorta, las letras asomaban por los lados. Se corrige por las dos
   puntas —46 px de diametro y 11 px de letra, que dejan el texto en ~42 px— en vez
   de solo agrandar: un circulo aun mayor volveria a tapar la foto, que es justo lo
   que este modulo vino a arreglar. El criterio de aceptacion es medible:
   `scrollWidth <= width`. */
.onsale,
span.onsale,
.woocommerce span.onsale {
	width: 46px !important;
	height: 46px !important;
	min-width: 46px !important;
	min-height: 46px !important;
	line-height: 46px !important;
	/* 25-sep-2026: con Fredoka One (más ancha que la fuente anterior) «¡Oferta!» medía
	   42 px a 11 px: dentro del círculo de 46 las letras de las puntas tocaban la curva
	   y se veían cortadas. A 10 px mide 38 px. */
	font-size: 10px !important;
	padding: 0 !important;
	margin: -6px 0 0 -6px !important;
	top: 0 !important;
	left: 0 !important;
	border-radius: 50% !important;
	background-color: #aad142 !important;
	/* #1a3005 sobre #aad142: 8,11:1 (AAA). Blanco solo llega a 1,76:1 (falla AA). */
	color: #1a3005 !important;
	font-weight: 700 !important;
}

/* Movil: la tarjeta encoge pero el circulo del escritorio no, así que el mismo tamano
   pasa de tapar un 21% de la foto a un 50% (medido en /tienda/ a 390 px, ver el PHP).
   Se reduce otra vez para el mismo panel lateral de filtros (<=767 px, mismo corte que
   `na-shop-filters.js`). */
@media ( max-width: 767px ) {
	.onsale,
	span.onsale,
	.woocommerce span.onsale {
		/* Mismo problema de desborde que en escritorio: 30 px no daban para el texto.
		   38/9 deja «¡Oferta!» en ~34 px dentro de 38 px de diametro. */
		width: 38px !important;
		height: 38px !important;
		min-width: 38px !important;
		min-height: 38px !important;
		line-height: 38px !important;
		font-size: 8px !important; /* Fredoka One: 30,6 px de texto en 38 (ver arriba) */
		margin: -4px 0 0 -4px !important;
	}
}

/* -------------------------------------------------------------------------
 * EXCEPCION: el badge de socio de PMS no cabe en el circulo.
 *
 * `.pms-woo-member-discount-badge` comparte la clase `.onsale` con el badge de
 * oferta, asi que heredaba el circulo de 40 px de arriba. Pero su texto no es
 * «¡Oferta!» (7 caracteres): es «Descuento NutriClub!» (20). Reportado por el
 * usuario: «las letras del badge para Descuento NutriClub se salen del badge ya
 * que este es muuuuy pequeño en comparacion con todo el texto».
 *
 * No se arregla agrandando el circulo —volveria a tapar la foto, que es justo lo
 * que se acaba de corregir— sino cambiandole la forma: una pildora que se ajusta
 * a su texto. Ocupa poco alto, que es la dimension que estorbaba sobre la imagen.
 * ---------------------------------------------------------------------- */

.onsale.pms-woo-member-discount-badge,
span.onsale.pms-woo-member-discount-badge,
.woocommerce span.onsale.pms-woo-member-discount-badge {
	width: auto !important;
	height: auto !important;
	min-width: 0 !important;
	min-height: 0 !important;
	/* 2-sep-2026 — antes era calc(100% - 12px) y en movil dejaba la pildora en 111 px
	   cuando su texto pedia 123: el text-overflow de abajo la remataba con «…».
	   Se le da todo el ancho de la tarjeta menos un margen minimo. */
	max-width: calc( 100% - 8px ) !important;
	line-height: 1.15 !important;
	/* 2-sep-2026 — la pildora se quedaba corta de leer («el badge completo en general
	   un poco muy pequeño»). Sube un punto y medio de letra y un poco de padding, y
	   NADA MAS: `white-space: nowrap` sigue puesto justo para que crecer no le meta un
	   corte de linea, que es la condicion que puso el usuario. */
	padding: 6px 11px !important;
	border-radius: 999px !important;
	font-size: 11.5px !important;
	letter-spacing: 0.01em !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
}

@media ( max-width: 767px ) {
	.onsale.pms-woo-member-discount-badge,
	span.onsale.pms-woo-member-discount-badge,
	.woocommerce span.onsale.pms-woo-member-discount-badge {
		/* En movil la letra se queda en 9 px: es lo que hace falta para que
		   «Descuento NutriClub!» entre completo en la tarjeta de 390 px sin
		   recortarse (medido: 111 px de texto en 115 disponibles). El aumento que
		   pidio el usuario se aplica en escritorio, donde si hay sitio. */
		padding: 4px 8px !important;
		font-size: 9px !important;
	}
}

/* -------------------------------------------------------------------------
 * EXCEPCION 2: en la FICHA de producto no se pinta ningun badge.
 *
 * Pedido por el usuario el 2-sep-2026: «cuando entras a la single page de los
 * productos, este mismo badge se ve mal en la esquina superior izquierda; en este
 * caso tendriamos que no mostrar el badge, ninguno de los dos, ya que la oferta se
 * ve en el precio del producto como tal». Y es cierto: ahi el precio ya sale con el
 * anterior tachado, asi que el badge no aporta y encima se monta sobre la galeria.
 *
 * ⚠ NO SE PUEDE OCULTAR `.onsale` EN TODO `.single-product`. Medido en
 * /producto/arena-para-gatos-tidy-cats/: la ficha tiene 5 badges, y solo el PRIMERO
 * es del producto que se esta viendo; los otros 4 son de las tarjetas de productos
 * relacionados de mas abajo, que SI deben seguir con su badge (son tarjetas de
 * catalogo como las de /tienda/). Por eso se acota al widget de la galeria.
 *
 * Se usa la clase del widget (`.elementor-widget-woocommerce-product-images`) y NO
 * el ID del elemento (era `2ce381cf` en la plantilla 53666): los IDs de plantilla no
 * coinciden entre dev y produccion. El segundo selector es la red por si la ficha se
 * rehace algun dia con la galeria nativa de WooCommerce en vez del widget.
 * ---------------------------------------------------------------------- */

.elementor-widget-woocommerce-product-images .onsale,
.single-product .woocommerce-product-gallery .onsale {
	display: none !important;
}