* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
padding: 20px;
}

.container {
max-width: 1200px;
margin: 0 auto;
background: white;
border-radius: 15px;
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
overflow: hidden;
}

.header {
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
color: white;
padding: 30px;
text-align: center;
}

.header h1 {
font-size: 2.5rem;
margin-bottom: 10px;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

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

.control-group {
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}

.control-group label {
display: block;
font-weight: 600;
color: #495057;
margin-bottom: 10px;
font-size: 1.1rem;
}

select, input {
width: 100%;
padding: 12px;
border: 2px solid #e9ecef;
border-radius: 8px;
font-size: 1rem;
transition: all 0.3s ease;
}

select:focus, input:focus {
outline: none;
border-color: #4facfe;
box-shadow: 0 0 0 3px rgba(79, 172, 254, 0.1);
}

.buttons {
padding: 30px;
text-align: center;
background: #f8f9fa;
}

.btn {
padding: 15px 30px;
margin: 10px;
border: none;
border-radius: 50px;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
text-transform: uppercase;
letter-spacing: 1px;
}

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

.btn-success {
background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
color: white;
}

.btn-warning {
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
color: white;
}

.btn:hover {
transform: translateY(-2px);
box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

.problems-container {
padding: 30px;
max-height: 600px;
overflow-y: auto;
}

.problem {
background: #fff;
border-left: 5px solid #4facfe;
padding: 20px;
margin-bottom: 20px;
border-radius: 0 10px 10px 0;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
transition: transform 0.3s ease;
}

.problem:hover {
transform: translateX(10px);
}

.problem-number {
font-weight: bold;
color: #4facfe;
font-size: 1.2rem;
margin-bottom: 10px;
}

.problem-text {
font-size: 1.1rem;
line-height: 1.6;
color: #495057;
margin-bottom: 15px;
}

.problem-answer {
background: #e3f2fd;
padding: 10px;
border-radius: 5px;
font-weight: 600;
color: #1976d2;
}

.empty-state {
text-align: center;
padding: 60px 20px;
color: #6c757d;
}

.empty-state i {
font-size: 4rem;
margin-bottom: 20px;
color: #dee2e6;
}

@media (max-width: 768px) {
.container {
margin: 10px;
border-radius: 10px;
}

.header h1 {
font-size: 2rem;
}

.controls {
padding: 20px;
grid-template-columns: 1fr;
}
}

.loading {
display: none;
text-align: center;
padding: 20px;
}

.spinner {
border: 4px solid #f3f3f3;
border-top: 4px solid #4facfe;
border-radius: 50%;
width: 50px;
height: 50px;
animation: spin 1s linear infinite;
margin: 0 auto 20px;
}

@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

let currentProblems = [];

const problemTemplates = {
1: {
suma: [
“Ana tiene {a} globos y su mamá le da {b} globos más. ¿Cuántos globos tiene Ana ahora?”,
“En el jardín hay {a} flores rojas y {b} flores amarillas. ¿Cuántas flores hay en total?”,
“Pedro colecciona {a} cartas y Juan le regala {b} cartas. ¿Cuántas cartas tiene Pedro ahora?”
],
resta: [
“María tenía {a} dulces y se comió {b} dulces. ¿Cuántos dulces le quedan?”,
“En el árbol había {a} pájaros y se volaron {b} pájaros. ¿Cuántos pájaros quedan en el árbol?”,
“Luis tenía {a} juguetes y regaló {b} juguetes. ¿Cuántos juguetes le quedan?”
]
},
2: {
suma: [
“En una escuela hay {a} estudiantes en primer grado y {b} estudiantes en segundo grado. ¿Cuántos estudiantes hay en total?”,
“Laura ahorró ${a} en enero y ${b} en febrero. ¿Cuánto dinero ahorró en total?”,
“En un estacionamiento hay {a} carros rojos y {b} carros azules. ¿Cuántos carros hay en total?”
],
resta: [
“Carlos tenía ${a} y gastó ${b} en el mercado. ¿Cuánto dinero le queda?”,
“En una caja había {a} lápices y se perdieron {b} lápices. ¿Cuántos lápices quedan?”,
“Sofía tenía {a} stickers y le dio {b} stickers a su hermana. ¿Cuántos stickers le quedan?”
],
multiplicacion: [
“Ana compra {a} cajas de galletas. Cada caja tiene {b} galletas. ¿Cuántas galletas compró en total?”,
“En el salón hay {a} mesas y en cada mesa hay {b} sillas. ¿Cuántas sillas hay en total?”
]
},
3: {
suma: [
“En una tienda se vendieron {a} libros el lunes y {b} libros el martes. ¿Cuántos libros se vendieron en total?”,
“Miguel tiene {a} monedas de $500 y {b} monedas de $100. Si cada moneda vale lo que dice, ¿cuánto dinero tiene?”
],
resta: [
“En un teatro hay {a} asientos y ya están ocupados {b} asientos. ¿Cuántos asientos están libres?”,
“Paula tenía ${a} y compró un libro que cuesta ${b}. ¿Cuánto dinero le sobra?”
],
multiplicacion: [
“En una granja hay {a} corrales y en cada corral hay {b} gallinas. ¿Cuántas gallinas hay en total?”,
“Roberto compra {a} paquetes de chicles. Cada paquete tiene {b} chicles. ¿Cuántos chicles compró?”
],
division: [
“Se tienen {result} caramelos para repartir entre {b} niños en partes iguales. ¿Cuántos caramelos le tocan a cada niño?”,
“En una caja hay {result} lápices que se van a guardar en {b} estuches. ¿Cuántos lápices van en cada estuche?”
],
compuesto: [
“Ana compra {a} cajas de huevos. Cada caja tiene {b} huevos. Si se rompen {c} huevos, ¿cuántos huevos buenos le quedan?”,
“En una escuela hay {a} salones con {b} estudiantes cada uno. Si llegan {c} estudiantes nuevos, ¿cuántos estudiantes hay en total?”
]
},
4: {
suma: [
“Una empresa vendió ${a} en enero, ${b} en febrero y ${c} en marzo. ¿Cuánto vendió en total en el primer trimestre?”,
“En una biblioteca hay {a} libros de aventuras, {b} libros de ciencia y {c} libros de historia. ¿Cuántos libros hay en total?”
],
resta: [
“Un granjero tenía ${a} y gastó ${b} en alimento para los animales. ¿Cuánto dinero le queda?”,
“En una fábrica se produjeron {a} productos y se vendieron {b} productos. ¿Cuántos productos quedaron sin vender?”
],
multiplicacion: [
“Una panadería produce {a} panes cada hora. ¿Cuántos panes produce en {b} horas?”,
“En un edificio hay {a} pisos y en cada piso hay {b} apartamentos. ¿Cuántos apartamentos hay en total?”
],
division: [
“Se tienen ${result} para repartir entre {b} personas en partes iguales. ¿Cuánto dinero recibe cada persona?”,
“Un tren recorre {result} kilómetros en {b} horas. ¿Cuántos kilómetros recorre cada hora?”
],
compuesto: [
“Carlos compra {a} cajas de chocolates. Cada caja tiene {b} chocolates y cuesta ${c}. ¿Cuántos chocolates compró y cuánto pagó en total?”,
“En una granja hay {a} corrales con {b} conejos cada uno. Si nacen {c} conejos más, ¿cuántos conejos hay en total?”
]
},
5: {
suma: [
“Una empresa tiene ingresos de ${a} en el primer semestre y ${b} en el segundo semestre. ¿Cuáles fueron los ingresos totales del año?”,
“En una ciudad viven {a} personas en la zona norte y {b} personas en la zona sur. ¿Cuántas personas viven en total?”
],
resta: [
“Un comerciante compra mercancía por ${a} y la vende por ${b}. ¿Cuál fue su ganancia?”,
“De una producción de {a} unidades, se vendieron {b} unidades. ¿Cuántas unidades quedaron en inventario?”
],
multiplicacion: [
“Una fábrica produce {a} productos por día. ¿Cuántos productos produce en {b} días?”,
“Un campo tiene {a} filas de árboles con {b} árboles en cada fila. ¿Cuántos árboles hay en total?”
],
division: [
“Se van a repartir ${result} entre {b} empleados en partes iguales. ¿Cuánto dinero recibe cada empleado?”,
“Una fábrica debe empacar {result} productos en cajas de {b} productos cada una. ¿Cuántas cajas necesita?”
],
compuesto: [
“Una tienda compra {a} productos a ${b} cada uno. Si vende cada producto a ${c}, ¿cuánto invirtió y cuánto ganará si vende todos?”,
“En un colegio hay {a} salones con {b} estudiantes cada uno. Si {c} estudiantes se van de intercambio, ¿cuántos estudiantes quedan?”
]
}
};

function getRandomRange(grade) {
const ranges = {
1: { min: 1, max: 10 },
2: { min: 1, max: 50 },
3: { min: 1, max: 100 },
4: { min: 10, max: 500 },
5: { min: 10, max: 1000 }
};
return ranges[grade] || ranges[3];
}

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

function generateSingleProblem(grade, operation) {
const range = getRandomRange(grade);
const templates = problemTemplates[grade] || problemTemplates[3];

let a, b, c, result, answer, template, problemText;

switch(operation) {
case ‘suma’:
a = getRandomNumber(range.min, range.max);
b = getRandomNumber(range.min, range.max);
answer = a + b;
template = templates.suma[Math.floor(Math.random() * templates.suma.length)];
problemText = template.replace(‘{a}’, a).replace(‘{b}’, b);
break;

case ‘resta’:
a = getRandomNumber(range.min + 5, range.max);
b = getRandomNumber(range.min, a – 1);
answer = a – b;
template = templates.resta[Math.floor(Math.random() * templates.resta.length)];
problemText = template.replace(‘{a}’, a).replace(‘{b}’, b);
break;

case ‘multiplicacion’:
a = getRandomNumber(2, Math.min(12, Math.floor(range.max / 10)));
b = getRandomNumber(2, Math.min(12, Math.floor(range.max / a)));
answer = a * b;
if (templates.multiplicacion) {
template = templates.multiplicacion[Math.floor(Math.random() * templates.multiplicacion.length)];
problemText = template.replace(‘{a}’, a).replace(‘{b}’, b);
} else {
problemText = `Si tienes ${a} grupos de ${b} elementos cada uno, ¿cuántos elementos tienes en total?`;
}
break;

case ‘division’:
b = getRandomNumber(2, 12);
a = getRandomNumber(2, 12);
result = a * b;
answer = a;
if (templates.division) {
template = templates.division[Math.floor(Math.random() * templates.division.length)];
problemText = template.replace(‘{result}’, result).replace(‘{b}’, b);
} else {
problemText = `Si tienes ${result} elementos y los divides en ${b} grupos iguales, ¿cuántos elementos hay en cada grupo?`;
}
break;

case ‘compuesto’:
a = getRandomNumber(2, Math.min(10, Math.floor(range.max / 20)));
b = getRandomNumber(2, Math.min(10, Math.floor(range.max / a)));
c = getRandomNumber(1, Math.min(5, a * b – 1));

if (templates.compuesto) {
template = templates.compuesto[Math.floor(Math.random() * templates.compuesto.length)];
problemText = template.replace(‘{a}’, a).replace(‘{b}’, b).replace(‘{c}’, c);

if (template.includes(‘se rompen’) || template.includes(‘se van’)) {
answer = (a * b) – c;
} else {
answer = (a * b) + c;
}
} else {
problemText = `Ana compra ${a} cajas con ${b} dulces cada una. Si se come ${c} dulces, ¿cuántos dulces le quedan?`;
answer = (a * b) – c;
}
break;
}

return {
text: problemText,
answer: answer,
type: operation
};
}

function generateProblems() {
const grade = document.getElementById(‘grade’).value;
const operation = document.getElementById(‘operation’).value;
const quantity = parseInt(document.getElementById(‘quantity’).value);

if (quantity 20) {
alert(‘Por favor ingresa una cantidad entre 1 y 20 problemas’);
return;
}

// Mostrar loading
document.getElementById(‘loading’).style.display = ‘block’;
document.getElementById(‘problemsContainer’).style.display = ‘none’;

setTimeout(() => {
currentProblems = [];

for (let i = 0; i < quantity; i++) {
let problemType = operation;

if (operation === 'mixto') {
const operations = ['suma', 'resta', 'multiplicacion', 'division', 'compuesto'];
problemType = operations[Math.floor(Math.random() * operations.length)];
}

const problem = generateSingleProblem(parseInt(grade), problemType);
currentProblems.push(problem);
}

displayProblems();

// Ocultar loading
document.getElementById('loading').style.display = 'none';
document.getElementById('problemsContainer').style.display = 'block';
document.getElementById('exportBtn').style.display = 'inline-block';
}, 1000);
}

function displayProblems() {
const container = document.getElementById('problemsContainer');

if (currentProblems.length === 0) {
container.innerHTML = `

`;
return;
}

let html = ”;
currentProblems.forEach((problem, index) => {
html += `

`;
});

container.innerHTML = html;
}

function clearProblems() {
currentProblems = [];
displayProblems();
document.getElementById(‘exportBtn’).style.display = ‘none’;
}

function exportToPDF() {
if (currentProblems.length === 0) {
alert(‘No hay problemas para exportar. Genera algunos problemas primero.’);
return;
}

const { jsPDF } = window.jspdf;
const doc = new jsPDF();

// Configurar fuente
doc.setFont(‘helvetica’);

// Título
doc.setFontSize(20);
doc.setTextColor(70, 130, 180);
doc.text(‘Problemas Matemáticos’, 105, 20, { align: ‘center’ });

// Información del grado
const grade = document.getElementById(‘grade’).value;
const operation = document.getElementById(‘operation’).value;
doc.setFontSize(12);
doc.setTextColor(100, 100, 100);
doc.text(`Grado: ${grade}° – Operación: ${operation}`, 105, 30, { align: ‘center’ });
doc.text(`Fecha: ${new Date().toLocaleDateString(‘es-ES’)}`, 105, 36, { align: ‘center’ });

// Línea separadora
doc.setLineWidth(0.5);
doc.setDrawColor(70, 130, 180);
doc.line(20, 45, 190, 45);

let yPosition = 55;

currentProblems.forEach((problem, index) => {
// Verificar si necesitamos una nueva página
if (yPosition > 250) {
doc.addPage();
yPosition = 20;
}

// Número del problema
doc.setFontSize(14);
doc.setTextColor(70, 130, 180);
doc.text(`${index + 1}.`, 20, yPosition);

// Texto del problema
doc.setFontSize(11);
doc.setTextColor(0, 0, 0);
const lines = doc.splitTextToSize(problem.text, 160);
doc.text(lines, 30, yPosition);

yPosition += lines.length * 5 + 10;

// Espacio para respuesta
doc.setTextColor(100, 100, 100);
doc.text(‘Respuesta: _________________________’, 30, yPosition);

yPosition += 20;
});

// Agregar página de respuestas
doc.addPage();
doc.setFontSize(18);
doc.setTextColor(70, 130, 180);
doc.text(‘Respuestas’, 105, 20, { align: ‘center’ });

doc.setLineWidth(0.5);
doc.line(20, 30, 190, 30);

yPosition = 45;
currentProblems.forEach((problem, index) => {
if (yPosition > 270) {
doc.addPage();
yPosition = 20;
}

doc.setFontSize(12);
doc.setTextColor(0, 0, 0);
doc.text(`${index + 1}. ${problem.answer}`, 20, yPosition);
yPosition += 8;
});

// Descargar el PDF
const filename = `problemas_matematicos_grado${grade}_${new Date().toISOString().slice(0, 10)}.pdf`;
doc.save(filename);
}

// Inicializar la aplicación
window.onload = function() {
displayProblems();
};