viewof tarjetas = { const initCards = async () => { const container = document.getElementById('cardContainer'); const input = document.getElementById('searchInput'); const sortAscButton = document.getElementById('sortAsc'); const sortDescButton = document.getElementById('sortDesc'); const modal = document.createElement('div'); modal.id = "infoModal"; modal.style.display = "none"; modal.style.position = "absolute"; modal.style.backgroundColor = "white"; modal.style.border = "1px solid #ccc"; modal.style.boxShadow = "0 4px 8px rgba(0, 0, 0, 0.1)"; modal.style.padding = "10px"; modal.style.zIndex = "1000"; document.body.appendChild(modal); if (!container || !input || !sortAscButton || !sortDescButton) { console.warn("Esperando al DOM..."); await new Promise(resolve => setTimeout(resolve, 100)); return initCards(); } input.addEventListener('keyup', filterCards); sortAscButton.addEventListener('click', () => sortCards('asc')); sortDescButton.addEventListener('click', () => sortCards('desc')); container.addEventListener('click', (event) => { if (event.target.classList.contains('info-button')) { const personaId = event.target.dataset.id; const persona = DATOS.find(p => p.id === personaId); showModal(event, persona); } }); document.addEventListener('click', (event) => { if (!modal.contains(event.target) && !event.target.classList.contains('info-button')) { modal.style.display = "none"; } }); }; initCards(); return html`

${DATOS.map(persona => html`

${persona.extra1 || persona.extra2 || persona.extra3 || persona.extra4 ? html` ` : ''}

${persona.nombre}

${persona.genero} ${persona.federacion}

${persona.salario} €

Salario bruto relativo a ${persona.año}

Financiación pública: ${persona.financiacion}

`)}

`; };