/**
 * Lo mínimo que el tema no trae ya.
 *
 * El medidor, las líneas de totales y las notas usan las clases del tema
 * Supra (.medidor, .linea-tot, .ahorro, .cupon-nota, .bloque), así que aquí
 * solo va la separación de los bloques nuevos y un respaldo discreto por si
 * el plugin acaba corriendo con otro tema.
 */

.supra-precios-medidor {
	margin: 0 0 14px;
}

.supra-precios-medidor.ficha {
	margin: 14px 0 18px;
}

.supra-precios-tarifa {
	margin-bottom: 18px;
}

.supra-precios-nota td {
	padding-top: 0;
}

.supra-precios-nota .cupon-nota {
	margin: 0;
}

/* Latido del precio al subir de escalón. */
@keyframes supra-precios-subio {
	0% { transform: none; }
	35% { transform: scale(1.08); }
	100% { transform: none; }
}

[data-med-precio].subio {
	display: inline-block;
	animation: supra-precios-subio .45s ease;
}

@media (prefers-reduced-motion: reduce) {
	[data-med-precio].subio {
		animation: none;
	}
}

/* Respaldo para un tema sin los estilos del medidor. */
.medidor:not([class*="med"]) {
	border: 1px solid rgba(0, 0, 0, .12);
	border-radius: 10px;
	padding: 14px;
}

.supra-precios-ahorro .ahorro {
	color: #16A34A;
	font-weight: 700;
}

/* El medidor vive en una columna estrecha dentro del resumen del pedido:
   la escalera completa no cabe con el tamaño de la portada. */
.supra-precios-medidor .med-esc {
	font-size: 10.5px;
	gap: 2px;
}

.supra-precios-medidor .med-esc small {
	font-size: 9.5px;
}

.supra-precios-medidor .med-precio b {
	font-size: 26px;
}

.supra-precios-medidor .med-msg {
	font-size: 12.5px;
}

/* La segunda caja de cupón, con el aspecto de la del tema. */
.supra-cupon-frec {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid rgba(0, 0, 0, .08);
}

.supra-cupon-frec > label {
	display: block;
	font-size: 12.5px;
	font-weight: 700;
	margin-bottom: 6px;
	line-height: 1.35;
}

.supra-cupon-frec .pista {
	margin: 6px 0 0;
	font-size: 12px;
}

form.supra-cupon-frec {
	margin-bottom: 22px;
}

/* En el cajón el medidor va compacto: la escalera completa no se lee en una
   columna de 360 px y el pie del cajón tiene que caber en una pantalla de
   teléfono. El precio, la barra y lo que falta para el siguiente escalón sí. */
.cajon-pie .supra-precios-medidor {
	margin-bottom: 10px;
}

.cajon-pie .supra-precios-medidor .med-esc {
	display: none;
}

.cajon-pie .supra-precios-medidor .med-precio b {
	font-size: 22px;
}