
```html
datos.forEach(sorteo => { const card = document.createElement('div'); card.style.background = 'white'; card.style.borderRadius = '10px'; card.style.boxShadow = '0 2px 8px rgba(0,0,0,0.1)'; card.style.width = '300px'; card.style.overflow = 'hidden';
// Header const header = document.createElement('div'); header.style.background = '#0E7D2F'; header.style.color = 'white'; header.style.padding = '12px'; header.style.textAlign = 'center'; header.style.fontWeight = 'bold'; header.style.fontSize = '14px'; header.style.lineHeight = '1.4'; header.textContent = sorteo.encabezado; card.appendChild(header);
// Tabla const tabla = document.createElement('table'); tabla.style.width = '100%'; tabla.style.borderCollapse = 'collapse';
// Cabeceras const thead = document.createElement('thead'); const trHead = document.createElement('tr'); const th1 = document.createElement('th'); th1.textContent = 'Ubic'; th1.style.background = '#F5F6CE'; th1.style.padding = '6px'; th1.style.border = '1px solid #ccc'; const th2 = document.createElement('th'); th2.textContent = 'Número'; th2.style.background = '#F5F6CE'; th2.style.padding = '6px'; th2.style.border = '1px solid #ccc'; trHead.appendChild(th1); trHead.appendChild(th2); thead.appendChild(trHead); tabla.appendChild(thead);
// Cuerpo: 20 filas const tbody = document.createElement('tbody'); sorteo.numeros.forEach((num, index) => { const fila = document.createElement('tr'); const celdaPos = document.createElement('td'); celdaPos.textContent = (index + 1); celdaPos.style.padding = '6px'; celdaPos.style.border = '1px solid #ccc'; celdaPos.style.textAlign = 'center'; const celdaNum = document.createElement('td'); celdaNum.textContent = num; celdaNum.style.padding = '6px'; celdaNum.style.border = '1px solid #ccc'; celdaNum.style.textAlign = 'center'; // Si es la primera posición (index 0) fondo verde claro if (index === 0) { celdaNum.style.backgroundColor = '#ccffcc'; } fila.appendChild(celdaPos); fila.appendChild(celdaNum); tbody.appendChild(fila); }); tabla.appendChild(tbody); card.appendChild(tabla); contenedor.appendChild(card); });
document.body.appendChild(contenedor); })();
```

