body {
font-family: Arial, sans-serif;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
}

.container {
background: white;
border-radius: 15px;
padding: 30px;
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

h1 {
text-align: center;
color: #333;
margin-bottom: 30px;
font-size: 2.5em;
text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
}

.controls {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin-bottom: 30px;
padding: 20px;
background: #f8f9fa;
border-radius: 10px;
}

.control-group {
display: flex;
flex-direction: column;
}

label {
font-weight: bold;
margin-bottom: 8px;
color: #555;
}

input, select {
padding: 10px;
border: 2px solid #ddd;
border-radius: 8px;
font-size: 16px;
transition: border-color 0.3s;
}

input:focus, select:focus {
outline: none;
border-color: #667eea;
}

.buttons {
display: flex;
gap: 15px;
justify-content: center;
margin-bottom: 30px;
flex-wrap: wrap;
}

button {
padding: 12px 24px;
font-size: 16px;
border: none;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s;
font-weight: bold;
min-width: 150px;
}

.btn-primary {
background: linear-gradient(45deg, #667eea, #764ba2);
color: white;
}

.btn-success {
background: linear-gradient(45deg, #56ab2f, #a8e6cf);
color: white;
}

.btn-info {
background: linear-gradient(45deg, #3498db, #2980b9);
color: white;
}

.btn-warning {
background: linear-gradient(45deg, #f39c12, #e67e22);
color: white;
}

button:hover {
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.exercises-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 30px;
margin-bottom: 30px;
}

.exercise {
background: #f8f9fa;
padding: 20px;
border-radius: 10px;
border: 2px solid #e9ecef;
text-align: center;
}

.exercise-number {
font-weight: bold;
color: #667eea;
margin-bottom: 15px;
font-size: 1.2em;
}

.sum-display {
font-family: ‘Courier New’, monospace;
font-size: 1.5em;
line-height: 1.2;
background: white;
padding: 15px;
border-radius: 8px;
border: 1px solid #ddd;
margin-bottom: 10px;
}

.sum-line {
margin: 5px 0;
display: flex;
justify-content: flex-end;
align-items: center;
min-height: 30px;
}

.operator {
margin-right: 10px;
color: #667eea;
font-weight: bold;
}

.line {
border-bottom: 2px solid #333;
margin: 10px 0;
}

.result-line {
font-weight: bold;
color: #333;
min-height: 40px;
}

.solutions {
background: #e8f5e8;
padding: 20px;
border-radius: 10px;
margin-top: 30px;
}

.solutions h3 {
color: #28a745;
text-align: center;
margin-bottom: 20px;
}

.hidden {
display: none;
}

.info-box {
background: #e3f2fd;
border-left: 4px solid #2196f3;
padding: 15px;
margin-bottom: 20px;
border-radius: 0 8px 8px 0;
}

@media (max-width: 768px) {
.controls {
grid-template-columns: 1fr;
}

.exercises-grid {
grid-template-columns: 1fr;
}

.buttons {
flex-direction: column;
align-items: center;
}
}

let currentExercises = [];
let currentSolutions = [];

function generateRandomNumber(min, max) {
return Math.floor(Math.random() * (max – min + 1)) + min;
}

function generateExercises() {
const numExercises = parseInt(document.getElementById(‘numExercises’).value);
const numNumbers = parseInt(document.getElementById(‘numNumbers’).value);
const minValue = parseInt(document.getElementById(‘minValue’).value);
const maxValue = parseInt(document.getElementById(‘maxValue’).value);
const difficulty = document.getElementById(‘difficulty’).value;

currentExercises = [];
currentSolutions = [];

for (let i = 0; i < numExercises; i++) {
const numbers = [];
for (let j = 0; j a + b, 0);
currentExercises.push(numbers);
currentSolutions.push(sum);
}

displayExercises();
}

function displayExercises() {
const container = document.getElementById(‘exercises-container’);
container.innerHTML = ”;

if (currentExercises.length === 0) {
container.innerHTML = ‘

Genera ejercicios para comenzar

‘;
return;
}

const grid = document.createElement(‘div’);
grid.className = ‘exercises-grid’;

currentExercises.forEach((numbers, index) => {
const exerciseDiv = document.createElement(‘div’);
exerciseDiv.className = ‘exercise’;

const exerciseNumber = document.createElement(‘div’);
exerciseNumber.className = ‘exercise-number’;
exerciseNumber.textContent = `Ejercicio ${index + 1}`;

const sumDisplay = document.createElement(‘div’);
sumDisplay.className = ‘sum-display’;

// Crear la visualización de la suma en columna
numbers.forEach((number, i) => {
const line = document.createElement(‘div’);
line.className = ‘sum-line’;

if (i === numbers.length – 1) {
// El último número lleva el signo +
line.innerHTML = `+${number.toLocaleString()}`;
} else {
// Todos los demás números sin signo
line.innerHTML = ` ${number.toLocaleString()}`;
}

sumDisplay.appendChild(line);
});

// Línea divisoria
const lineDiv = document.createElement(‘div’);
lineDiv.className = ‘line’;
sumDisplay.appendChild(lineDiv);

// Espacio para el resultado (sin línea adicional)
const resultSpace = document.createElement(‘div’);
resultSpace.className = ‘sum-line result-line’;
resultSpace.innerHTML = `  `;
sumDisplay.appendChild(resultSpace);

exerciseDiv.appendChild(exerciseNumber);
exerciseDiv.appendChild(sumDisplay);
grid.appendChild(exerciseDiv);
});

container.appendChild(grid);
displaySolutions();
}

function displaySolutions() {
const container = document.getElementById(‘solutions-content’);
container.innerHTML = ”;

const grid = document.createElement(‘div’);
grid.className = ‘exercises-grid’;

currentExercises.forEach((numbers, index) => {
const exerciseDiv = document.createElement(‘div’);
exerciseDiv.className = ‘exercise’;

const exerciseNumber = document.createElement(‘div’);
exerciseNumber.className = ‘exercise-number’;
exerciseNumber.textContent = `Ejercicio ${index + 1}`;

const sumDisplay = document.createElement(‘div’);
sumDisplay.className = ‘sum-display’;

// Crear la visualización de la suma en columna con resultado
numbers.forEach((number, i) => {
const line = document.createElement(‘div’);
line.className = ‘sum-line’;

if (i === numbers.length – 1) {
// El último número lleva el signo +
line.innerHTML = `+${number.toLocaleString()}`;
} else {
// Todos los demás números sin signo
line.innerHTML = ` ${number.toLocaleString()}`;
}

sumDisplay.appendChild(line);
});

// Línea divisoria
const lineDiv = document.createElement(‘div’);
lineDiv.className = ‘line’;
sumDisplay.appendChild(lineDiv);

// Línea para el resultado (con la respuesta)
const resultLine = document.createElement(‘div’);
resultLine.className = ‘sum-line result-line’;
resultLine.innerHTML = ` ${currentSolutions[index].toLocaleString()}`;
sumDisplay.appendChild(resultLine);

exerciseDiv.appendChild(exerciseNumber);
exerciseDiv.appendChild(sumDisplay);
grid.appendChild(exerciseDiv);
});

container.appendChild(grid);
}

function toggleSolutions() {
const container = document.getElementById(‘solutions-container’);
container.classList.toggle(‘hidden’);
}

function downloadExercisesPDF() {
if (currentExercises.length === 0) {
alert(‘Primero genera algunos ejercicios’);
return;
}

const { jsPDF } = window.jspdf;
const doc = new jsPDF();
const title = document.getElementById(‘title’).value;

// Configurar fuente
doc.setFont(‘helvetica’, ‘bold’);
doc.setFontSize(18);

// Título
doc.text(title, 105, 15, { align: ‘center’ });

// Información
doc.setFontSize(10);
doc.setFont(‘helvetica’, ‘normal’);
doc.text(‘Nombre: ________________________’, 20, 30);
doc.text(‘Fecha: ________________________’, 120, 30);
doc.text(‘Resuelve las siguientes sumas:’, 20, 42);

let yPosition = 55;
let xPosition = 20;
let exerciseCount = 0;
let exercisesPerRow = 3;
let columnWidth = 60;

currentExercises.forEach((numbers, index) => {
// Verificar si necesitamos una nueva página
if (yPosition > 250) {
doc.addPage();
yPosition = 20;
xPosition = 20;
exerciseCount = 0;
}

// Calcular posición en columnas
let currentX = xPosition + (exerciseCount % exercisesPerRow) * columnWidth;
let currentY = yPosition;

// Número del ejercicio
doc.setFont(‘helvetica’, ‘bold’);
doc.setFontSize(11);
doc.text(`${index + 1}.`, currentX, currentY);
currentY += 8;

// Configurar fuente para los números
doc.setFont(‘courier’, ‘normal’);
doc.setFontSize(12);

// Encontrar el número más ancho para definir la posición base de alineación
const maxWidth = Math.max(…numbers.map(n => n.toString().length));

// Posición base para alineación a la derecha
const rightAlignPosition = currentX + 5 + (maxWidth * 3.5);

// Escribir cada número de la suma con alineación a la derecha
numbers.forEach((number, i) => {
const numberStr = number.toString();

if (i === numbers.length – 1) {
// El último número lleva el signo +
doc.text(`+ ${numberStr}`, rightAlignPosition, currentY, { align: ‘right’ });
} else {
// Todos los demás números sin signo
doc.text(numberStr, rightAlignPosition, currentY, { align: ‘right’ });
}
currentY += 6;
});

// Línea divisoria
const lineStart = currentX + 5;
const lineEnd = rightAlignPosition;
doc.line(lineStart, currentY, lineEnd, currentY);
currentY += 12; // Espacio para la respuesta

exerciseCount++;

// Cambiar de fila cada 3 ejercicios
if (exerciseCount % exercisesPerRow === 0) {
yPosition += 50;
}
});

doc.save(`${title}.pdf`);
}

function downloadSolutionsPDF() {
if (currentExercises.length === 0) {
alert(‘Primero genera algunos ejercicios’);
return;
}

const { jsPDF } = window.jspdf;
const doc = new jsPDF();
const title = document.getElementById(‘title’).value;

// Configurar fuente
doc.setFont(‘helvetica’, ‘bold’);
doc.setFontSize(18);

// Título
doc.text(`${title} – SOLUCIONARIO`, 105, 15, { align: ‘center’ });

doc.setFontSize(10);
doc.setFont(‘helvetica’, ‘normal’);
doc.text(‘Respuestas correctas:’, 20, 30);

let yPosition = 50;
let xPosition = 20;
let exerciseCount = 0;
let exercisesPerRow = 3;
let columnWidth = 60;

currentExercises.forEach((numbers, index) => {
// Verificar si necesitamos una nueva página
if (yPosition > 250) {
doc.addPage();
yPosition = 20;
xPosition = 20;
exerciseCount = 0;
}

// Calcular posición en columnas
let currentX = xPosition + (exerciseCount % exercisesPerRow) * columnWidth;
let currentY = yPosition;

// Número del ejercicio
doc.setFont(‘helvetica’, ‘bold’);
doc.setFontSize(11);
doc.text(`${index + 1}.`, currentX, currentY);
currentY += 8;

// Configurar fuente para los números
doc.setFont(‘courier’, ‘normal’);
doc.setFontSize(12);

// Encontrar el número más ancho para definir la posición base de alineación
const allNumbers = […numbers, currentSolutions[index]];
const maxWidth = Math.max(…allNumbers.map(n => n.toString().length));

// Posición base para alineación a la derecha
const rightAlignPosition = currentX + 5 + (maxWidth * 3.5);

// Escribir cada número de la suma con alineación a la derecha
numbers.forEach((number, i) => {
const numberStr = number.toString();

if (i === numbers.length – 1) {
// CORREGIDO: El último número lleva el signo +
doc.text(`+ ${numberStr}`, rightAlignPosition, currentY, { align: ‘right’ });
} else {
// Todos los demás números sin signo
doc.text(numberStr, rightAlignPosition, currentY, { align: ‘right’ });
}
currentY += 6;
});

// Línea divisoria
const lineStart = currentX + 5;
const lineEnd = rightAlignPosition;
doc.line(lineStart, currentY, lineEnd, currentY);
currentY += 6;

// Respuesta alineada a la derecha
doc.setFont(‘helvetica’, ‘bold’);
doc.setFontSize(12);
const result = currentSolutions[index].toString();
doc.text(result, rightAlignPosition, currentY, { align: ‘right’ });

// Volver a la fuente normal para el próximo ejercicio
doc.setFont(‘courier’, ‘normal’);

exerciseCount++;

// Cambiar de fila cada 3 ejercicios
if (exerciseCount % exercisesPerRow === 0) {
yPosition += 50;
}
});

doc.save(`${title} – Solucionario.pdf`);
}

// Generar ejercicios iniciales
generateExercises();