document.getElementById("previewBtn").addEventListener("click", function () {
    const base = parseFloat(document.getElementById("base").value);
    const height = parseFloat(document.getElementById("height").value);
    const units = document.getElementById("units").value;
    const layoutPreview = document.getElementById("layoutPreview");
  
    if (!base || !height) {
      alert("Por favor, ingresa valores válidos para la base y la altura.");
      return;
    }
  
    // Calcular el margen (A)
    const isVertical = height > base;
    const margin = isVertical ? 0.07 * base : 0.05 * base;
    document.getElementById("margin").value = `${margin.toFixed(2)} ${units}`;
  
    // Ajustar dimensiones del layout
    const layoutWidth = isVertical ? "auto" : "100%";
    const layoutHeight = isVertical ? "100%" : "auto";
    const aspectRatio = base / height;
  
    layoutPreview.style.width = layoutWidth;
    layoutPreview.style.height = layoutHeight;
    layoutPreview.style.aspectRatio = aspectRatio;
  
    // Dibujar guías
    const canvas = document.createElement("canvas");
    canvas.width = layoutPreview.clientWidth;
    canvas.height = layoutPreview.clientHeight;
    const ctx = canvas.getContext("2d");
  
    // Fondo blanco
    ctx.fillStyle = "white";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
  
    // Líneas guía
    ctx.strokeStyle = "red";
    ctx.lineWidth = 2;
  
    const marginPx = isVertical
      ? canvas.width * 0.07
      : canvas.width * 0.05;
  
    // Líneas de margen
    ctx.strokeRect(
      marginPx,
      marginPx,
      canvas.width - marginPx * 2,
      canvas.height - marginPx * 2
    );
  
    // Línea roja clara
    ctx.strokeStyle = "rgba(255, 0, 0, 0.5)";
    const halfMargin = marginPx / 2;
    ctx.beginPath();
    ctx.moveTo(marginPx, canvas.height - marginPx - halfMargin);
    ctx.lineTo(canvas.width - marginPx, canvas.height - marginPx - halfMargin);
    ctx.stroke();
  
    layoutPreview.innerHTML = "";
    layoutPreview.appendChild(canvas);
  });
  
  document.getElementById("saveBtn").addEventListener("click", function () {
    const canvas = document.querySelector("#layoutPreview canvas");
    if (!canvas) {
      alert("Por favor, genera primero una previsualización.");
      return;
    }
  
    const link = document.createElement("a");
    link.download = "layout.png";
    link.href = canvas.toDataURL();
    link.click();
  });