/*
 * Etiquetas de descuento del listado de productos.
 *
 * Hoja aparte de frontend.css a proposito: esa pesa 34 KB de tabla de tramos,
 * regalos y avisos del carrito, y en un listado no se usa ni una linea. Aqui
 * viaja solo lo que pinta la tarjeta.
 */

/* --- Lo que se retira del tema ------------------------------------------ */

/*
 * El porcentaje que pintan los temas suele salir de comparar el precio normal
 * con el de oferta GUARDADO en el producto, y eso ignora las reglas del
 * plugin: un producto de 15 rebajado a 10 con una regla del 50% anuncia -33%
 * mientras en caja se cobran 7,50, y uno sin rebaja guardada no anuncia nada
 * aunque la regla lo descuente.
 *
 * Se oculta el suyo y se pinta el nuestro, que sale del mismo sitio que el
 * precio. Va por nombre de clase, no por posicion: si el tema deja de
 * pintarlo, esta regla simplemente no encuentra nada.
 */
.badge-descuento {
	display: none !important;
}

/*
 * Al quitar el descuento, la lista del tema puede quedarse sin nada visible y
 * su borde seguiria dibujando un recuadro hueco en la esquina.
 *
 * :empty no vale aqui: solo casa cuando no hay NI UN nodo, y el marcado
 * indentado de un tema deja saltos de linea dentro. Quien decide de verdad es
 * labels.js, que mira si queda alguna etiqueta visible y marca la lista con
 * data-odr-empty. Esta regla es el respaldo para el caso literal.
 */
.lista-badges:empty,
[data-odr-empty] {
	display: none !important;
}

/*
 * La etiqueta se inyecta junto a la imagen, dentro del contenedor que el tema
 * ya posiciona para colocar la suya. Solo se fuerza el posicionado en el
 * listado estandar de WooCommerce, donde puede no haberlo: tocar contenedores
 * por selectores genericos descolocaria el layout del tema.
 */
.woocommerce ul.products li.product {
	position: relative;
}

/* --- La caja de grupo ---------------------------------------------------- */

/*
 * El unico elemento posicionado. Antes el tema colocaba su lista en la esquina
 * y nosotros la nuestra en la misma, las dos absolutas: se tapaban, y el
 * desplazamiento que lo evitaba dependia de un selector de hermanos que no
 * casa cuando el tema pinta su lista DESPUES de la imagen.
 *
 * Ahora la caja se posiciona una vez y todo lo que va dentro —la lista del
 * tema, que labels.js mueve aqui, y la nuestra— es un hijo en flujo normal.
 * Flex los apila en columna: no pueden solaparse, haya una lista o tres.
 */
.odr-badges {
	position: absolute;
	top: .5rem;
	left: .5rem;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .25rem;
	max-width: calc(100% - 3.5rem); /* Deja libre el boton de favoritos. */
	margin: 0;
	padding: 0;
	/* La tarjeta entera suele ser un enlace: sin esto la etiqueta se come el
	   clic en la esquina de la imagen. */
	pointer-events: none;
}

/*
 * Cada lista dentro del grupo. Se anula el posicionado que traiga del tema
 * —incluidas las utilidades tipo Tailwind absolute/top-2/left-2, de ahi el
 * !important— porque dentro de la caja ya no tiene que colocarse sola.
 */
.odr-badges__list {
	position: static !important;
	top: auto !important;
	right: auto !important;
	bottom: auto !important;
	left: auto !important;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Una lista del tema que se quede sin etiquetas visibles no debe seguir
 * ocupando hueco ni dibujando su borde dentro del grupo.
 */
.odr-badges__list--theme:empty {
	display: none;
}

/*
 * Respaldo sin JS (desactivado, o un error de otro plugin corta el script).
 * La lista del tema se queda donde estaba, asi que se vuelve al reparto por
 * posicion: la nuestra baja para no taparla.
 *
 * Solo mientras la caja no este agrupada: en cuanto labels.js la marca, el
 * apilado lo hace flex y este desplazamiento sobra. Se paga un salto de
 * posicion en la carga a cambio de que sin JS siga siendo legible, que es el
 * unico caso en que un solape seria permanente.
 */
.odr-badges:not([data-odr-grouped]) {
	top: 2.25rem;
}

/* Respaldo: el contenedor antiguo, por si un CSS propio lo posiciona. */
.lista-badge-orange {
	pointer-events: none;
}

/* --- La etiqueta --------------------------------------------------------- */

/*
 * Colores propios con variable: el comerciante los cambia desde los ajustes
 * (CSS personalizado) sin tener que reescribir el resto de la regla.
 */
.odr-badges .odr-label,
.lista-badge-orange .odr-label {
	display: inline-block;
	padding: .3em .55em;
	border-radius: 3px;
	background: var(--odr-label-bg, #d63638);
	color: var(--odr-label-fg, #fff);
	font-family: inherit;
	font-size: 10px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: .04em;
	text-transform: uppercase;
	white-space: nowrap;
	/* El tema puede tener reglas de tipografia sobre los span de la tarjeta. */
	text-decoration: none;
	text-shadow: none;
}

/*
 * El descuento es la etiqueta que mas se mira: se le deja su propio hueco por
 * si el comerciante quiere distinguirla del resto.
 */
.odr-badges .odr-label--descuento,
.lista-badge-orange .odr-label--descuento {
	background: var(--odr-label-descuento-bg, var(--odr-label-bg, #d63638));
	color: var(--odr-label-descuento-fg, var(--odr-label-fg, #fff));
}

/* Pantallas pequenas: la tarjeta encoge y la etiqueta debe encoger con ella. */
@media (max-width: 480px) {
	.odr-badges {
		top: .375rem;
		left: .375rem;
		gap: .2rem;
	}

	.odr-badges:not([data-odr-grouped]) {
		top: 2rem;
	}

	.odr-badges .odr-label,
.lista-badge-orange .odr-label {
		padding: .25em .45em;
		font-size: 9px;
	}
}

/* Respeta el modo oscuro del tema sin imponer color. */
@media (prefers-color-scheme: dark) {
	.odr-badges .odr-label,
.lista-badge-orange .odr-label {
		box-shadow: 0 0 0 1px rgba(255, 255, 255, .12);
	}
}