${status}

`;
}

function createCard(item, borderColor) {
const card = document.createElement(«div»);
card.className = «vd2__card»;

const fotoWrap = document.createElement(«div»);
fotoWrap.className = «vd2__foto»;
if (borderColor) {
fotoWrap.style.borderColor = borderColor;
} else {
fotoWrap.style.opacity = «0.3»;
fotoWrap.style.border = «none»;
}

const img = document.createElement(«img»);
img.loading = «lazy»;
img.decoding = «async»;
img.alt = «foto-diputado»;
img.src = photoBase + (item.url_foto || «»);
img.addEventListener(«error», () => {
img.style.opacity = «0.35»;
}, {
once: true
});

fotoWrap.appendChild(img);

const nombre = document.createElement(«p»);
nombre.className = «vd2__nombre»;
nombre.textContent = String(item.nombres || «»).toLowerCase();

const apellido = document.createElement(«p»);
apellido.className = «vd2__apellido»;
apellido.textContent = String(item.apellido || «»).toLowerCase();

const bloque = document.createElement(«span»);
bloque.className = «vd2__bloque»;
bloque.textContent = String(item.bloque || «»);

card.appendChild(fotoWrap);
card.appendChild(nombre);
card.appendChild(apellido);
card.appendChild(bloque);

return card;
}

function seatClass(kind) {
if (kind === «AFIRMATIVO») return «vd2__seat–afirmativo»;
if (kind === «NEGATIVO») return «vd2__seat–negativo»;
if (kind === «ABSTENCIÓN») return «vd2__seat–abstencion»;
if (kind === «AUSENTE») return «vd2__seat–ausente»;
return «vd2__seat–empty»;
}

function hemicicloParams(which) {
// Basado en la distribución original para Diputados (257)
const seatsPerRow = [38, 36, 33, 30, 27, 24, 21, 19, 16, 13]; // suma 257
if (which === «big») {
return {
centerX: 300,
baseY: 450,
rows: 10,
seatsPerRow,
verticalOffset: 2,
radiusStart: 300,
radiusStep: 30
};
}
return {
centerX: 300,
baseY: 450,
rows: 10,
seatsPerRow,
verticalOffset: 2,
radiusStart: 170,
radiusStep: 16
};
}

function computeRowSeatCounts(seatsPerRow, totals) {
const totalSeats = seatsPerRow.reduce((a, b) => a + b, 0);
return seatsPerRow.map(seatsInRow => {
const exact = {
AFIRMATIVO: (totals.AFIRMATIVO / totalSeats) * seatsInRow,
NEGATIVO: (totals.NEGATIVO / totalSeats) * seatsInRow,
«ABSTENCIÓN»: (totals[«ABSTENCIÓN»] / totalSeats) * seatsInRow,
AUSENTE: (totals.AUSENTE / totalSeats) * seatsInRow
};

const floor = {
AFIRMATIVO: Math.floor(exact.AFIRMATIVO),
NEGATIVO: Math.floor(exact.NEGATIVO),
«ABSTENCIÓN»: Math.floor(exact[«ABSTENCIÓN»]),
AUSENTE: Math.floor(exact.AUSENTE)
};

let assigned = floor.AFIRMATIVO + floor.NEGATIVO + floor[«ABSTENCIÓN»] + floor.AUSENTE;
let diff = seatsInRow – assigned;

const rems = [{
k: «AFIRMATIVO»,
r: exact.AFIRMATIVO – floor.AFIRMATIVO
},
{
k: «NEGATIVO»,
r: exact.NEGATIVO – floor.NEGATIVO
},
{
k: «ABSTENCIÓN»,
r: exact[«ABSTENCIÓN»] – floor[«ABSTENCIÓN»]
},
{
k: «AUSENTE»,
r: exact.AUSENTE – floor.AUSENTE
},
].sort((a, b) => b.r – a.r);

while (diff > 0) {
for (const it of rems) {
if (diff <= 0) break;
floor[it.k] += 1;
diff–;
}
}
return floor;
});
}

function renderHemiciclo(which, totals) {
const el = byRole(which === «big» ? «hemiciclo-big» : «hemiciclo-small»);
if (!el) return;
el.innerHTML = «»;

const p = hemicicloParams(which);
let rowSeatCounts = computeRowSeatCounts(p.seatsPerRow, totals);
const maxSeatsInRow = p.seatsPerRow[0];

for (let col = 0; col < maxSeatsInRow; col++) {
for (let row = 0; row < p.rows; row++) {
if (col >= p.seatsPerRow[row]) continue;

const seatsInThisRow = p.seatsPerRow[row];
const radius = p.radiusStart – row * (p.radiusStep – p.verticalOffset);
const angleRange = Math.PI;
const angleStep = (seatsInThisRow > 1) ? angleRange / (seatsInThisRow – 1) : 0;
const angle = (Math.PI – angleRange) / 2 + col * angleStep;

const x = p.centerX + radius * Math.cos(angle);
const y = p.baseY – radius * Math.sin(angle);

let kind = «EMPTY»;
if (rowSeatCounts[row].AFIRMATIVO > 0) {
kind = «AFIRMATIVO»;
rowSeatCounts[row].AFIRMATIVO–;
} else if (rowSeatCounts[row].NEGATIVO > 0) {
kind = «NEGATIVO»;
rowSeatCounts[row].NEGATIVO–;
} else if (rowSeatCounts[row][«ABSTENCIÓN»] > 0) {
kind = «ABSTENCIÓN»;
rowSeatCounts[row][«ABSTENCIÓN»]–;
} else if (rowSeatCounts[row].AUSENTE > 0) {
kind = «AUSENTE»;
rowSeatCounts[row].AUSENTE–;
}

const seat = document.createElement(«div»);
seat.className = «vd2__seat » + seatClass(kind);
seat.style.left = x + «px»;
seat.style.top = y + «px»;
el.appendChild(seat);
}
}
}

function populateFilters(data) {
const selProv = byRole(«select-provincia»);
const selBloq = byRole(«select-bloque»);
if (!selProv || !selBloq) return;

const provSet = new Set();
const bloqSet = new Map(); // bloque -> full

data.forEach(r => {
if (r.provincia) provSet.add(r.provincia);
if (r.bloque) bloqSet.set(r.bloque, r.bloque_full || r.bloque);
});

Array.from(provSet).sort().forEach(p => {
const opt = document.createElement(«option»);
opt.value = p;
opt.textContent = p;
selProv.appendChild(opt);
});

Array.from(bloqSet.entries())
.sort((a, b) => String(a[0]).localeCompare(String(b[0])))
.forEach(([code, full]) => {
const opt = document.createElement(«option»);
opt.value = code;
opt.textContent = `${full} (${code})`;
selBloq.appendChild(opt);
});
}

function renderFiltered(data, field, value, targetEl) {
targetEl.innerHTML = «»;
const rows = data.filter(r => value === «all» || r[field] === value);

const order = [«AFIRMATIVO», «NEGATIVO», «ABSTENCIÓN», «AUSENTE»];
const colorBy = {
AFIRMATIVO: «#00A377»,
NEGATIVO: «#c90808»,
«ABSTENCIÓN»: «#444″,
AUSENTE: null
};

order.forEach(voto => {
rows.filter(r => normalizeVoto(r.voto) === voto).forEach(r => {
targetEl.appendChild(createCard(r, colorBy[voto]));
});
});
}

function wireUI(data) {
// toggles
$$(‘[data-role=»section»], [data-role=»filter-provincia»], [data-role=»filter-bloque»]’).forEach(sec => {
const btn = sec.querySelector(‘[data-role=»toggle»]’);
if (!btn) return;
btn.addEventListener(«click», () => {
const open = sec.getAttribute(«data-open») !== «true»;
openPanel(sec, open);
});
});

// abrir por defecto secciones principales, y dejar filtros cerrados
$$(‘[data-role=»section»]’).forEach(sec => openPanel(sec, true));
$$(‘[data-role=»filter-provincia»], [data-role=»filter-bloque»]’).forEach(sec => openPanel(sec, false));

// go top
const goTop = byRole(«go-top»);
if (goTop) {
goTop.addEventListener(«click», () => root.scrollIntoView({
behavior: «smooth»
}));
const obs = new IntersectionObserver((entries) => {
entries.forEach(e => {
goTop.style.display = e.isIntersecting ? «block» : «none»;
});
}, {
threshold: 0.1
});
obs.observe(root);
}

// filtros
const selProv = byRole(«select-provincia»);
const selBloq = byRole(«select-bloque»);
const provOut = byRole(«provincia-results»);
const bloqOut = byRole(«bloque-results»);

if (selProv && provOut) {
selProv.addEventListener(«change», (e) => {
renderFiltered(data, «provincia», e.target.value, provOut);
const sec = byRole(«filter-provincia»);
if (sec) openPanel(sec, true);
});
}

if (selBloq && bloqOut) {
selBloq.addEventListener(«change», (e) => {
renderFiltered(data, «bloque», e.target.value, bloqOut);
const sec = byRole(«filter-bloque»);
if (sec) openPanel(sec, true);
});
}
}

async function init() {
setLoaded(false);

const csvUrl = root.dataset.csvUrl;
if (!csvUrl) {
const summary = byRole(«summary»);
if (summary) summary.innerHTML = `

Error: falta data-csv-url

`;
return;
}

try {
const Papa = await ensurePapa();

Papa.parse(csvUrl, {
download: true,
header: true,
skipEmptyLines: true,
complete: function(res) {
const data = (res && res.data) ? res.data : [];

// panels por voto
const panelByVote = {};
$$(‘[data-role=»section»]’).forEach(sec => {
const voto = sec.getAttribute(«data-voto»);
const panel = sec.querySelector(‘[data-role=»panel»]’);
if (voto && panel) panelByVote[voto] = panel;
});

const counts = {
AFIRMATIVO: 0,
NEGATIVO: 0,
«ABSTENCIÓN»: 0,
AUSENTE: 0
};
const colorBy = {
AFIRMATIVO: «#00A377»,
NEGATIVO: «#c90808»,
«ABSTENCIÓN»: «#444″,
AUSENTE: null
};

data.forEach(row => {
const voto = normalizeVoto(row.voto);
if (!counts.hasOwnProperty(voto)) return;
counts[voto]++;

const panel = panelByVote[voto];
if (panel) {
panel.appendChild(createCard(row, colorBy[voto]));
}
});

// counts en UI
$$(‘[data-role=»count»]’).forEach(el => {
const k = el.getAttribute(«data-kind»);
if (k && counts.hasOwnProperty(k)) el.textContent = String(counts[k]);
});

// hemiciclo + summary
renderHemiciclo(«big», counts);
renderHemiciclo(«small», counts);
renderSummary(counts);

// filtros + ui
populateFilters(data);
wireUI(data);

setLoaded(true);

// recalcular heights en secciones abiertas
$$(‘[data-role=»section»]’).forEach(sec => openPanel(sec, true));
}
});

} catch (err) {
console.error(err);
const summary = byRole(«summary»);
if (summary) {
summary.innerHTML = `

Error: ${escapeHtml(err.message || err)}

`;
}
}
}

init();
})();