/* Botones de icono y toggle comprar */
:root {
	--icon-btn-size: 32px;
	--icon-btn-padding: 0.25rem;
	--icon-btn-radius: 0.35rem;
	--icon-btn-font: 1.05rem;
}

.icon-btn,
.btn-comprar-toggle {
	box-sizing: border-box;
	width: var(--icon-btn-size);
	height: var(--icon-btn-size);
	padding: var(--icon-btn-padding);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--icon-btn-radius);
	font-size: var(--icon-btn-font);
	line-height: 1;
}

.btn-comprar-toggle.btn-outline-success {
	color: #198754;
	border-color: #198754;
	background: transparent;
}
.btn-comprar-toggle.btn-success {
	color: #fff;
	background: #198754;
	border-color: #198754;
}
.btn-comprar-toggle .icon-on {
	display: none;
}
.btn-comprar-toggle.active .icon-on {
	display: inline-block;
}
.btn-comprar-toggle.active .icon-off {
	display: none;
}

/* Card producto */
.prod-card,
.grouped-card {
	border-radius: 0.5rem;
	overflow: hidden;
	box-shadow: 0 0.2rem 0.6rem rgba(0, 0, 0, 0.06);
}
.prod-card.comprado,
.grouped-card.comprado {
	border: 3px solid #198754;
}
.prod-media {
	width: 70px;
	height: 70px;
	flex: 0 0 70px;
	display: inline-block;
}
.prod-media img {
	width: 70px;
	height: 70px;
	object-fit: cover;
	border-radius: 0.35rem;
	display: block;
}
.prod-body {
	min-width: 0;
	display: flex;
	flex-direction: column;
}
.prod-title {
	font-weight: 500;
	margin: 0;
	font-size: 0.85rem;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 1.18;
}
.card-actions {
	min-width: 44px;
}

/* Lista de precios por tienda */
.stores-price-list .store-line {
	font-size: 0.82rem;
	color: #6c757d;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.2rem;
}
.stores-price-list .store-line > .d-flex,
.stores-price-list .store-line > .text-end {
	display: flex;
	align-items: center;
	gap: 0.4rem;
}
.stores-price-list .store-line > .d-flex {
	align-items: center;
	display: flex;
	gap: 0.4rem;
}
.stores-price-list .tienda-logo {
	display: flex;
	align-items: center;
	height: 22px; /* igual o mayor al alto del logo */
}
.stores-price-list .store-line small {
	line-height: 1;
	display: inline-block;
	margin: 0;
}

/* Badge de promo/descuento */
.app-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.15em 0.35em;
	border-radius: 0.45rem;
	font-weight: 500;
	font-size: 0.65rem;
	line-height: 1;
	color: #fff !important;
	background: #dc3545; /* rojo bootstrap por defecto, se puede sobrescribir */
}

/* Cotizaciones: layout y precio */
.list-price-col {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: center;
	gap: 0.25rem;
	min-width: 110px;
}
.price-row {
	display: flex;
	align-items: center;
	gap: 0.3rem;
	justify-content: flex-end;
}
.price-row .app-badge {
	flex: 0 0 auto;
}
.list-row-left {
	flex: 1 1 auto;
	min-width: 0;
}
.list-row-right {
	flex: 0 0 auto;
	gap: 0rem;
}
.list-row-left .promo-text {
	white-space: normal;
	word-break: break-word;
}
.list-group-item .d-flex.w-100 {
	gap: 0.5rem;
	font-size: 0.8rem;
}

/* Logos de tiendas centralizados */
.tienda-logo img {
	display: inline-block;
	vertical-align: middle;
	object-fit: contain;
}

/* Tamaño para preciosLista (store-line) */
.stores-price-list .tienda-logo img {
	max-width: 40px;
}

/* Tamaño para cotizaciones (list-group) */
.list-group-item .tienda-logo img {
	max-width: 60px;
	height: 18px;
	display: block;
	object-fit: contain;
}