El 'pactómetro' para el 15M: así puedes 'cuadrar' pactos en base a las previsiones

/* Todo queda encapsulado aquí dentro */ #pacto-cyl{ --pm-bg:#f5f7fb; --pm-card:#ffffff; --pm-text:#1f2937; --pm-muted:#6b7280; --pm-line:#dbe3ee; --pm-ok:#198754; --pm-warn:#d97706; --pm-pp:#2f6fed; --pm-psoe:#d63333; --pm-vox:#66b245; --pm-upl:#ff4fa3; --pm-pod:#7b1fa2; --pm-soria:#f59e0b; --pm-avila:#10b981; --pm-shadow:0 10px 30px rgba(17,24,39,.08); --pm-radius:18px; max-width:1200px; margin:0 auto; padding:24px; background:var(--pm-bg); color:var(--pm-text); font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; line-height:1.4; } #pacto-cyl, #pacto-cyl *{ box-sizing:border-box; writing-mode:horizontal-tb !important; text-orientation:mixed !important; transform:none !important; white-space:normal !important; } #pacto-cyl .pm-header{ background:linear-gradient(135deg,#0f172a,#1e293b); color:#fff; border-radius:24px; padding:28px; box-shadow:var(--pm-shadow); margin-bottom:24px; } #pacto-cyl .pm-header h1{ margin:0 0 8px; font-size:clamp(28px,4vw,42px); line-height:1.05; color:#fff; } #pacto-cyl .pm-header p{ margin:0; color:#dbeafe; font-size:16px; } #pacto-cyl .pm-summary{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:20px; } #pacto-cyl .pm-summary-box{ background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); border-radius:18px; padding:16px; } #pacto-cyl .pm-summary-label{ display:block; font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:#bfdbfe; margin-bottom:6px; } #pacto-cyl .pm-summary-value{ font-size:30px; font-weight:800; color:#fff; } #pacto-cyl .pm-grid{ display:block; } #pacto-cyl .pm-card{ background:var(--pm-card); border-radius:var(--pm-radius); padding:20px; box-shadow:var(--pm-shadow); margin-bottom:24px; overflow:hidden; } #pacto-cyl .pm-card h2{ margin:0 0 14px; font-size:20px; line-height:1.2; color:var(--pm-text); } #pacto-cyl .pm-muted{ color:var(--pm-muted); font-size:14px; margin-bottom:16px; line-height:1.4; } #pacto-cyl .pm-party{ padding:14px 0; border-bottom:1px solid var(--pm-line); } #pacto-cyl .pm-party:last-child{ border-bottom:0; } #pacto-cyl .pm-party-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; } #pacto-cyl .pm-name{ display:flex; align-items:center; gap:10px; font-weight:700; line-height:1.2; color:var(--pm-text); } #pacto-cyl .pm-dot{ width:14px; height:14px; border-radius:999px; display:inline-block; flex:0 0 auto; } #pacto-cyl .pm-controls{ display:grid; grid-template-columns:1fr 72px; gap:10px; align-items:center; } #pacto-cyl input[type="range"]{ width:100%; accent-color:#334155; cursor:pointer; } #pacto-cyl input[type="number"]{ width:100%; padding:10px 12px; border:1px solid var(--pm-line); border-radius:12px; font-size:16px; font-weight:700; text-align:center; background:#fff; color:var(--pm-text); } #pacto-cyl .pm-legend{ display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; } #pacto-cyl .pm-chip{ display:inline-flex; align-items:center; gap:8px; background:#f8fafc; border:1px solid var(--pm-line); border-radius:999px; padding:8px 12px; font-size:13px; color:var(--pm-muted); } #pacto-cyl .pm-coalitions{ display:grid; gap:14px; } #pacto-cyl .pm-coalition{ border:1px solid var(--pm-line); border-radius:18px; padding:16px; background:#fff; } #pacto-cyl .pm-coalition-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; } #pacto-cyl .pm-coalition-title{ font-weight:800; line-height:1.2; color:var(--pm-text); } #pacto-cyl .pm-pill{ padding:6px 10px; border-radius:999px; font-size:12px; font-weight:800; white-space:nowrap !important; } #pacto-cyl .pm-pill.ok{ background:rgba(25,135,84,.12); color:var(--pm-ok); } #pacto-cyl .pm-pill.no{ background:rgba(217,119,6,.12); color:var(--pm-warn); } #pacto-cyl .pm-bar-wrap{ position:relative; height:22px; background:#eef2f7; border-radius:999px; overflow:hidden; margin-bottom:8px; } #pacto-cyl .pm-bar{ height:100%; border-radius:999px; width:0%; transition:width .25s ease; } #pacto-cyl .pm-majority-line{ position:absolute; top:0; bottom:0; width:3px; background:#111827; left:51.2195%; /* 42/82 */ opacity:.85; } #pacto-cyl .pm-majority-label{ display:flex; justify-content:space-between; gap:12px; font-size:13px; color:var(--pm-muted); line-height:1.3; } #pacto-cyl .pm-stack{ position:relative; display:flex; height:28px; border-radius:999px; overflow:hidden; background:#eef2f7; margin-top:14px; border:1px solid var(--pm-line); } #pacto-cyl .pm-seg{ height:100%; min-width:0; display:flex; align-items:center; justify-content:center; color:#fff; font-size:12px; font-weight:800; white-space:nowrap !important; overflow:hidden; } #pacto-cyl .pm-foot{ margin-top:20px; color:var(--pm-muted); font-size:13px; line-height:1.4; } @media (max-width:700px){ #pacto-cyl .pm-summary{ grid-template-columns:1fr; } #pacto-cyl .pm-controls{ grid-template-columns:1fr 84px; } #pacto-cyl .pm-coalition-head, #pacto-cyl .pm-majority-label, #pacto-cyl .pm-party-top{ flex-direction:column; align-items:flex-start; } #pacto-cyl .pm-pill{ white-space:normal !important; } } Pactómetro · Cortes de Castilla y León 82 procuradores en juego · mayoría absoluta en 42 Mayoría absoluta 42 Escaños introducidos 0 Escaños restantes 82 Reparto de procuradores Introduce los escaños de cada partido. El pactómetro recalcula automáticamente las mayorías. PP PSOE VOX UPL Podemos Soria ¡Ya! Por Ávila Consejo de uso: procura que la suma total sea 82 para reflejar un escenario completo. Mayorías y pactos La línea negra marca la mayoría absoluta: 42 procuradores. (function () { const root = document.getElementById("pacto-cyl"); if (!root) return; const TOTAL = 82; const MAJ = 42; const parties = [ { key: "pp", label: "PP", color: "var(--pm-pp)", value: 31 }, { key: "psoe", label: "PSOE", color: "var(--pm-psoe)", value: 28 }, { key: "vox", label: "VOX", color: "var(--pm-vox)", value: 13 }, { key: "upl", label: "UPL", color: "var(--pm-upl)", value: 3 }, { key: "pod", label: "Podemos", color: "var(--pm-pod)", value: 3 }, { key: "soria", label: "Soria ¡Ya!", color: "var(--pm-soria)", value: 3 }, { key: "avila", label: "Por Ávila", color: "var(--pm-avila)", value: 1 } ]; const p = Object.fromEntries(parties.map(x => [x.key, x])); const coalitionDefs = [ { name: "PP + VOX", keys: ["pp", "vox"] }, { name: "PP + VOX + Por Ávila", keys: ["pp", "vox", "avila"] }, { name: "PP + VOX + UPL", keys: ["pp", "vox", "upl"] }, { name: "PP + UPL + Por Ávila", keys: ["pp", "upl", "avila"] }, { name: "PSOE + Podemos", keys: ["psoe", "pod"] }, { name: "PSOE + Podemos + Soria ¡Ya!", keys: ["psoe", "pod", "soria"] }, { name: "PSOE + Podemos + Soria ¡Ya! + UPL", keys: ["psoe", "pod", "soria", "upl"] }, { name: "PSOE + Podemos + Soria ¡Ya! + UPL + Por Ávila", keys: ["psoe", "pod", "soria", "upl", "avila"] }, { name: "PP + PSOE", keys: ["pp", "psoe"] } ]; const partyList = root.querySelector("#pmPartyList"); const coalitionsEl = root.querySelector("#pmCoalitions"); const totalEscanosEl = root.querySelector("#pmTotalEscanos"); const restantesEl = root.querySelector("#pmRestantes"); const stackBar = root.querySelector("#pmStackBar"); function clamp(n) { return Math.max(0, Math.min(TOTAL, n)); } function sum(keys) { return keys.reduce((acc, key) => acc + p[key].value, 0); } function coalitionBar(keys) { const colors = keys.map(k => p[k].color); return `linear-gradient(90deg, ${colors.join(", ")})`; } function renderPartyInputs() { partyList.innerHTML = ""; parties.forEach(party => { const row = document.createElement("div"); row.className = "pm-party"; row.innerHTML = ` ${party.label} ${party.value} escaños `; partyList.appendChild(row); const range = row.querySelector(`#pm-range-${party.key}`); const num = row.querySelector(`#pm-num-${party.key}`); range.addEventListener("input", e => { party.value = clamp(+e.target.value); num.value = party.value; update(); }); num.addEventListener("input", e => { party.value = clamp(+e.target.value || 0); range.value = party.value; update(); }); }); } function renderCoalitions() { coalitionsEl.innerHTML = ""; coalitionDefs.forEach(c => { const total = sum(c.keys); const pct = (total / TOTAL) * 100; const reaches = total >= MAJ; const card = document.createElement("div"); card.className = "pm-coalition"; card.innerHTML = ` ${c.name} ${total} / ${TOTAL} · ${reaches ? "Mayoría" : "No llega"} ${c.keys.map(k => p[k].label).join(" + ")} Meta: ${MAJ} `; coalitionsEl.appendChild(card); }); } function renderStack() { stackBar.innerHTML = ""; const total = parties.reduce((acc, party) => acc + party.value, 0); parties.forEach(party => { if (party.value = 3 ? `${party.label} ${party.value}` : ""; stackBar.appendChild(seg); }); if (total = 4 ? `Restan ${TOTAL - total}` : ""; stackBar.appendChild(remaining); } } function updateCounters() { const total = parties.reduce((acc, party) => acc + party.value, 0); totalEscanosEl.textContent = total; restantesEl.textContent = TOTAL - total; parties.forEach(party => { const label = root.querySelector(`#pm-label-${party.key}`); if (label) label.textContent = `${party.value} escaños`; }); totalEscanosEl.style.color = total === TOTAL ? "#ffffff" : "#fde68a"; restantesEl.style.color = total