{
const { a, b, c } = coeficientes;
const curve = Array.from({ length: 401 }, (_, i) => {
const x = -10 + i * 0.05;
return { x, y: a * x * x + b * x + c };
});
const discriminante = b * b - 4 * a * c;
const points = [];
if (a !== 0 && discriminante >= 0) {
const raiz1 = (-b + Math.sqrt(discriminante)) / (2 * a);
const raiz2 = (-b - Math.sqrt(discriminante)) / (2 * a);
points.push({ x: raiz1, y: 0, label: `x=${raiz1.toFixed(2)}` });
if (discriminante > 0) points.push({ x: raiz2, y: 0, label: `x=${raiz2.toFixed(2)}` });
} else if (a === 0 && b !== 0) {
const raiz = -c / b;
points.push({ x: raiz, y: 0, label: `x=${raiz.toFixed(2)}` });
}
const plot = Plot.plot({
height: 360,
grid: true,
marginLeft: 42,
marginRight: 18,
x: { domain: [-10, 10], label: "x" },
y: { domain: [-10, 10], label: null },
marks: [
Plot.ruleY([0], { stroke: "#94a3b8", strokeWidth: 1.4 }),
Plot.ruleX([0], { stroke: "#94a3b8", strokeWidth: 1.4 }),
Plot.line(curve, { x: "x", y: "y", stroke: "#1f5f8b", strokeWidth: 3 }),
Plot.dot(points, { x: "x", y: "y", fill: "#d94841", r: 6, stroke: "white", strokeWidth: 2 }),
Plot.text(points, { x: "x", y: "y", text: "label", dy: -15, fill: "#172033", stroke: "white", strokeWidth: 4, fontWeight: "bold", fontSize: 12 })
]
});
plot.classList.add("p3-plot-uza");
const state =
discriminante > 0 ? "Dos soluciones reales" :
discriminante === 0 ? "Una solución real" :
"Sin soluciones reales";
return htl.html`<div class="p3-plot-card-uza">
${plot}
<div class="p3-discriminant-uza">
<span>Δ = ${discriminante.toFixed(2)}</span>
<strong>${state}</strong>
</div>
</div>`;
}