Visualizador de Formaci\u00f3n – F\u00fatbol 360 Pro<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;600;700;800&display=swap\" rel=\"stylesheet\">\n <style>\n body { font-family: 'Inter', sans-serif; margin: 0; padding: 20px; background-color: #f0f2f5; color: #333; display: flex; flex-direction: column; align-items: center; min-height: 100vh; box-sizing: border-box; }\n .app-container { background-color: #ffffff; border-radius: 15px; box-shadow: 0 10px 25px rgba(0,0,0,0.15); padding: 30px; max-width: 1250px; width: 100%; display: flex; flex-wrap: wrap; gap: 30px; box-sizing: border-box; }\n h1 { width: 100%; text-align: center; color: #1a202c; font-size: 1.8rem; margin-bottom: 10px; font-weight: 700; }\n \n .field-container {\n flex: 1.4; min-width: 360px; max-width: 750px; background: #43b14e;\n background-image: repeating-linear-gradient(90deg, #3fa64a 0, #3fa64a 20px, #43b14e 20px, #43b14e 40px);\n border: 4px solid rgba(255,255,255,0.85); border-radius: 14px; position: relative;\n aspect-ratio: 105\/68; overflow: hidden; box-shadow: inset 0 0 18px rgba(0,0,0,0.25);\n }\n\n .field-container::before { content:\"\"; position:absolute; left:50%; top:0; height:100%; width:2px; background:white; transform:translateX(-50%); z-index: 1; }\n .field-container::after { content:\"\"; position:absolute; left:50%; top:50%; width:120px; height:120px; border:2px solid white; border-radius:50%; transform:translate(-50%, -50%); z-index: 1; }\n\n .goal-left, .goal-right {\n position:absolute; top:50%; width:3.5%; height:20%; border:3px solid #ffffff; border-radius:6px;\n background:rgba(255,255,255,0.1); transform:translateY(-50%); z-index:1;\n }\n .goal-left { left:0; border-left:none; }\n .goal-right { right:0; border-right:none; }\n\n .player-dot {\n position: absolute; width: 46px; height: 46px; background: #1e3a56; border: 2px solid white;\n border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center;\n color: white; cursor: grab; transition: transform 0.15s ease; z-index: 10;\n box-shadow: 0 4px 6px rgba(0,0,0,0.3);\n }\n .jersey-number { font-size: 0.95rem; font-weight: 800; line-height: 1; }\n .player-name { \n position: absolute; bottom: -22px; font-size: 0.7rem; font-weight: 700;\n background: rgba(0,0,0,0.75); padding: 2px 6px; border-radius: 4px;\n white-space: nowrap;\n }\n\n .control-panel { flex:1; min-width:320px; background:#f8f9fa; border-radius:12px; padding:20px; box-shadow:0 4px 12px rgba(0,0,0,0.05); height: fit-content; }\n .player-input-list { display: flex; flex-direction: column; gap: 8px; max-height: 550px; overflow-y: auto; }\n .player-input-group { display: grid; grid-template-columns: 35px 1fr 55px; align-items: center; gap: 8px; }\n .player-input-group input { padding:6px; border:1px solid #d0d6db; border-radius:4px; font-size:0.85rem; }\n\n .buttons-group { display:grid; grid-template-columns: 1fr 1fr; gap:10px; margin-top:20px; }\n .action-button { padding:12px; border:none; border-radius:8px; font-size:0.85rem; font-weight:600; cursor:pointer; transition:0.3s; color:white; }\n .update { background:#2ecc71; grid-column: span 2; font-size: 1rem; } \n .reset { background:#e74c3c; }\n .capture { background:#3498db; } \n .save { background:#34495e; } \n .load { background:#f1c40f; color:#333; }\n .download { background:#27ae60; margin-top: 10px; width: 100%; }\n \n .substitutes-list { margin-top:20px; display:flex; flex-wrap:wrap; gap:6px; }\n .substitute-player { background:#607D8B; color:white; padding:4px 10px; border-radius:12px; font-size:0.75rem; font-weight:600; }\n <\/style>\n<\/head>\n<body>\n <div class=\"app-container\">\n <h1>Visualizador de Formaci\u00f3n<\/h1>\n\n <div style=\"width:100%; text-align:center; margin-bottom:15px;\">\n <label style=\"font-weight:700; margin-right:10px;\">SISTEMA T\u00c1CTICO:<\/label>\n <select id=\"tacticSelect\" onchange=\"changeTactic()\" style=\"padding:8px; border-radius:4px;\">\n <option value=\"433\">4-3-3<\/option>\n <option value=\"442\">4-4-2<\/option>\n <option value=\"4231\">4-2-3-1<\/option>\n <option value=\"451\">4-5-1<\/option>\n <option value=\"352\">3-5-2<\/option>\n <option value=\"343\">3-4-3<\/option>\n <option value=\"532\">5-3-2<\/option>\n <option value=\"541\">5-4-1<\/option>\n <option value=\"4141\">4-1-4-1<\/option>\n <option value=\"4312\">4-3-1-2<\/option>\n <\/select>\n <\/div>\n\n <div class=\"field-container\" id=\"footballField\">\n <div class=\"goal-left\"><\/div>\n <div class=\"goal-right\"><\/div>\n <\/div>\n\n <div class=\"control-panel\">\n <div id=\"playerInputList\" class=\"player-input-list\"><\/div>\n\n <div class=\"buttons-group\">\n <button class=\"action-button update\" onclick=\"updateFormation()\">ACTUALIZAR CAMPO<\/button>\n <button class=\"action-button save\" onclick=\"saveFormation()\">GUARDAR DATOS<\/button>\n <button class=\"action-button load\" onclick=\"loadFormation()\">CARGAR DATOS<\/button>\n <button class=\"action-button capture\" onclick=\"captureFormation()\">CAPTURAR T\u00c1CTICA<\/button>\n <button class=\"action-button reset\" onclick=\"resetFormation()\">REINICIAR<\/button>\n <\/div>\n \n <div id=\"capturedImageDisplay\" style=\"margin-top:20px; text-align:center;\"><\/div>\n <div class=\"substitutes-list\" id=\"substitutesDisplay\"><\/div>\n <\/div>\n <\/div>\n\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/html2canvas\/1.4.1\/html2canvas.min.js\"><\/script>\n <script>\n const partidoID = \"formacion_actual\";\n const tactics = {\n '433': {'1':{l:'8%',t:'50%'},'4':{l:'28%',t:'20%'},'2':{l:'22%',t:'40%'},'6':{l:'22%',t:'60%'},'3':{l:'28%',t:'80%'},'5':{l:'45%',t:'50%'},'8':{l:'62%',t:'30%'},'10':{l:'62%',t:'70%'},'7':{l:'82%',t:'20%'},'11':{l:'82%',t:'80%'},'9':{l:'88%',t:'50%'}},\n '442': {'1':{l:'8%',t:'50%'},'4':{l:'28%',t:'15%'},'2':{l:'22%',t:'38%'},'6':{l:'22%',t:'62%'},'3':{l:'28%',t:'85%'},'8':{l:'55%',t:'30%'},'5':{l:'55%',t:'45%'},'10':{l:'55%',t:'55%'},'11':{l:'55%',t:'70%'},'7':{l:'82%',t:'35%'},'9':{l:'82%',t:'65%'}},\n '4231': {'1':{l:'8%',t:'50%'},'4':{l:'28%',t:'20%'},'2':{l:'22%',t:'38%'},'6':{l:'22%',t:'62%'},'3':{l:'28%',t:'80%'},'5':{l:'45%',t:'40%'},'8':{l:'45%',t:'60%'},'10':{l:'65%',t:'50%'},'7':{l:'80%',t:'18%'},'11':{l:'80%',t:'82%'},'9':{l:'90%',t:'50%'}},\n '451': {'1':{l:'8%',t:'50%'},'4':{l:'28%',t:'15%'},'2':{l:'22%',t:'38%'},'6':{l:'22%',t:'62%'},'3':{l:'28%',t:'85%'},'5':{l:'45%',t:'50%'},'8':{l:'60%',t:'30%'},'10':{l:'60%',t:'70%'},'7':{l:'75%',t:'15%'},'11':{l:'75%',t:'85%'},'9':{l:'90%',t:'50%'}},\n '352': {'1':{l:'8%',t:'50%'},'2':{l:'22%',t:'32%'},'5':{l:'18%',t:'50%'},'6':{l:'22%',t:'68%'},'4':{l:'45%',t:'15%'},'8':{l:'55%',t:'35%'},'10':{l:'55%',t:'65%'},'3':{l:'45%',t:'85%'},'7':{l:'70%',t:'50%'},'9':{l:'85%',t:'38%'},'11':{l:'85%',t:'62%'}},\n '343': {'1':{l:'8%',t:'50%'},'2':{l:'22%',t:'32%'},'5':{l:'18%',t:'50%'},'6':{l:'22%',t:'68%'},'4':{l:'48%',t:'15%'},'8':{l:'52%',t:'40%'},'10':{l:'52%',t:'60%'},'3':{l:'48%',t:'85%'},'7':{l:'80%',t:'18%'},'11':{l:'80%',t:'82%'},'9':{l:'90%',t:'50%'}},\n '532': {'1':{l:'8%',t:'50%'},'4':{l:'30%',t:'15%'},'2':{l:'22%',t:'35%'},'5':{l:'18%',t:'50%'},'6':{l:'22%',t:'65%'},'3':{l:'30%',t:'85%'},'8':{l:'55%',t:'30%'},'10':{l:'55%',t:'70%'},'7':{l:'52%',t:'50%'},'9':{l:'85%',t:'38%'},'11':{l:'85%',t:'62%'}},\n '541': {'1':{l:'8%',t:'50%'},'4':{l:'30%',t:'15%'},'2':{l:'22%',t:'35%'},'5':{l:'18%',t:'50%'},'6':{l:'22%',t:'65%'},'3':{l:'30%',t:'85%'},'8':{l:'55%',t:'25%'},'7':{l:'55%',t:'42%'},'10':{l:'55%',t:'58%'},'11':{l:'55%',t:'75%'},'9':{l:'88%',t:'50%'}},\n '4141': {'1':{l:'8%',t:'50%'},'4':{l:'28%',t:'15%'},'2':{l:'22%',t:'38%'},'6':{l:'22%',t:'62%'},'3':{l:'28%',t:'85%'},'5':{l:'42%',t:'50%'},'8':{l:'62%',t:'35%'},'10':{l:'62%',t:'65%'},'7':{l:'78%',t:'18%'},'11':{l:'78%',t:'82%'},'9':{l:'90%',t:'50%'}},\n '4312': {'1':{l:'8%',t:'50%'},'4':{l:'28%',t:'20%'},'2':{l:'22%',t:'40%'},'6':{l:'22%',t:'60%'},'3':{l:'28%',t:'80%'},'5':{l:'45%',t:'50%'},'8':{l:'60%',t:'30%'},'10':{l:'60%',t:'70%'},'7':{l:'72%',t:'50%'},'9':{l:'88%',t:'38%'},'11':{l:'88%',t:'62%'}}\n };\n\n let currentTactic = '433';\n const footballField = document.getElementById('footballField');\n const substitutesDisplay = document.getElementById('substitutesDisplay');\n const playerInputList = document.getElementById('playerInputList');\n let dragged = null;\n\n function generatePlayerInputs() {\n playerInputList.innerHTML = '';\n for (let i = 1; i <= 20; i++) { \/\/ Cambiado a 20\n const div = document.createElement('div');\n div.className = 'player-input-group';\n div.innerHTML = `<label>#${i}<\/label>\n <input type=\"text\" id=\"player${i}\" placeholder=\"Nombre\">\n <input type=\"number\" id=\"height${i}\" placeholder=\"cm\">`;\n playerInputList.appendChild(div);\n }\n }\n\n function makeDraggable(dot) {\n dot.addEventListener('mousedown', e => dragged = dot);\n dot.addEventListener('touchstart', e => { dragged = dot; e.preventDefault(); }, {passive: false});\n }\n\n const moveHandler = e => {\n if (dragged) {\n const rect = footballField.getBoundingClientRect();\n const clientX = e.type.includes('touch') ? e.touches[0].clientX : e.clientX;\n const clientY = e.type.includes('touch') ? e.touches[0].clientY : e.clientY;\n let x = ((clientX - rect.left) \/ rect.width * 100);\n let y = ((clientY - rect.top) \/ rect.height * 100);\n dragged.style.left = Math.max(0, Math.min(100, x)) + '%';\n dragged.style.top = Math.max(0, Math.min(100, y)) + '%';\n }\n };\n\n document.addEventListener('mousemove', moveHandler);\n document.addEventListener('touchmove', moveHandler, {passive: false});\n document.addEventListener('mouseup', () => dragged = null);\n document.addEventListener('touchend', () => dragged = null);\n\n function changeTactic() {\n currentTactic = document.getElementById('tacticSelect').value;\n updateFormation();\n }\n\n function updateFormation() {\n footballField.querySelectorAll('.player-dot').forEach(e => e.remove());\n substitutesDisplay.innerHTML = '';\n for (let i = 1; i <= 20; i++) { \/\/ Cambiado a 20\n const name = document.getElementById(`player${i}`).value;\n const height = document.getElementById(`height${i}`).value;\n if (i <= 11) {\n const pos = tactics[currentTactic][i];\n const dot = document.createElement('div');\n dot.className = 'player-dot';\n dot.style.left = pos.l; dot.style.top = pos.t;\n dot.style.transform = 'translate(-50%, -50%)';\n dot.innerHTML = `<span class=\"jersey-number\">${i}<\/span>\n <span class=\"player-name\">${name || '---'}<\/span>`;\n footballField.appendChild(dot);\n makeDraggable(dot);\n } else if (name) {\n const sub = document.createElement('span');\n sub.className = 'substitute-player';\n sub.textContent = `#${i} ${name} ${height ? '('+height+'cm)' : ''}`;\n substitutesDisplay.appendChild(sub);\n }\n }\n }\n\n function captureFormation() {\n html2canvas(footballField).then(canvas => {\n const imgData = canvas.toDataURL('image\/png');\n const img = document.createElement('img');\n img.src = imgData; img.style.width = '100%'; img.style.marginTop = '10px';\n const dwnBtn = document.createElement('button');\n dwnBtn.className = 'action-button download';\n dwnBtn.innerText = 'DESCARGAR IMAGEN';\n dwnBtn.onclick = () => { const a = document.createElement('a'); a.download = 't\u00e1ctica.png'; a.href = imgData; a.click(); };\n const container = document.getElementById('capturedImageDisplay');\n container.innerHTML = ''; container.appendChild(img); container.appendChild(dwnBtn);\n });\n }\n\n function saveFormation() {\n const data = {};\n for (let i = 1; i <= 20; i++) { \/\/ Cambiado a 20\n data[i] = document.getElementById(`player${i}`).value;\n data['h'+i] = document.getElementById(`height${i}`).value;\n }\n localStorage.setItem(partidoID, JSON.stringify(data));\n alert('Guardado');\n }\n\n function loadFormation() {\n const data = JSON.parse(localStorage.getItem(partidoID) || '{}');\n for (let i = 1; i <= 20; i++) { \/\/ Cambiado a 20\n document.getElementById(`player${i}`).value = data[i] || '';\n document.getElementById(`height${i}`).value = data['h'+i] || '';\n }\n updateFormation();\n }\n\n function resetFormation() {\n for (let i = 1; i <= 20; i++) { \/\/ Cambiado a 20\n document.getElementById(`player${i}`).value = '';\n document.getElementById(`height${i}`).value = '';\n }\n updateFormation();\n }\n\n document.addEventListener('DOMContentLoaded', () => {\n generatePlayerInputs();\n loadFormation();\n });\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Visualizador de Formaci\u00f3n – F\u00fatbol 360 Pro Visualizador de Formaci\u00f3n SISTEMA T\u00c1CTICO: 4-3-34-4-24-2-3-14-5-13-5-23-4-35-3-25-4-14-1-4-14-3-1-2 ACTUALIZAR CAMPO GUARDAR DATOS CARGAR DATOS CAPTURAR T\u00c1CTICA REINICIAR<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-4069","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/futbol360.online\/futbol-360\/wp-json\/wp\/v2\/pages\/4069","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/futbol360.online\/futbol-360\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/futbol360.online\/futbol-360\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/futbol360.online\/futbol-360\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/futbol360.online\/futbol-360\/wp-json\/wp\/v2\/comments?post=4069"}],"version-history":[{"count":1,"href":"https:\/\/futbol360.online\/futbol-360\/wp-json\/wp\/v2\/pages\/4069\/revisions"}],"predecessor-version":[{"id":4070,"href":"https:\/\/futbol360.online\/futbol-360\/wp-json\/wp\/v2\/pages\/4069\/revisions\/4070"}],"wp:attachment":[{"href":"https:\/\/futbol360.online\/futbol-360\/wp-json\/wp\/v2\/media?parent=4069"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":4069,"date":"2026-05-16T16:14:16","date_gmt":"2026-05-16T19:14:16","guid":{"rendered":"https:\/\/futbol360.online\/futbol-360\/?page_id=4069"},"modified":"2026-05-16T16:14:16","modified_gmt":"2026-05-16T19:14:16","slug":"analisis-rival-central-espanol-fecha-2","status":"publish","type":"page","link":"https:\/\/futbol360.online\/futbol-360\/analisis-rival-central-espanol-fecha-2\/","title":{"rendered":"An\u00e1lisis rival – Central espa\u00f1ol – fecha 2"},"content":{"rendered":"\n\n\n\n \n \n Visualizador de Formaci\u00f3n – F\u00fatbol 360 Pro<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;600;700;800&display=swap\" rel=\"stylesheet\">\n <style>\n body { font-family: 'Inter', sans-serif; margin: 0; padding: 20px; background-color: #f0f2f5; color: #333; display: flex; flex-direction: column; align-items: center; min-height: 100vh; box-sizing: border-box; }\n .app-container { background-color: #ffffff; border-radius: 15px; box-shadow: 0 10px 25px rgba(0,0,0,0.15); padding: 30px; max-width: 1250px; width: 100%; display: flex; flex-wrap: wrap; gap: 30px; box-sizing: border-box; }\n h1 { width: 100%; text-align: center; color: #1a202c; font-size: 1.8rem; margin-bottom: 10px; font-weight: 700; }\n \n .field-container {\n flex: 1.4; min-width: 360px; max-width: 750px; background: #43b14e;\n background-image: repeating-linear-gradient(90deg, #3fa64a 0, #3fa64a 20px, #43b14e 20px, #43b14e 40px);\n border: 4px solid rgba(255,255,255,0.85); border-radius: 14px; position: relative;\n aspect-ratio: 105\/68; overflow: hidden; box-shadow: inset 0 0 18px rgba(0,0,0,0.25);\n }\n\n .field-container::before { content:\"\"; position:absolute; left:50%; top:0; height:100%; width:2px; background:white; transform:translateX(-50%); z-index: 1; }\n .field-container::after { content:\"\"; position:absolute; left:50%; top:50%; width:120px; height:120px; border:2px solid white; border-radius:50%; transform:translate(-50%, -50%); z-index: 1; }\n\n .goal-left, .goal-right {\n position:absolute; top:50%; width:3.5%; height:20%; border:3px solid #ffffff; border-radius:6px;\n background:rgba(255,255,255,0.1); transform:translateY(-50%); z-index:1;\n }\n .goal-left { left:0; border-left:none; }\n .goal-right { right:0; border-right:none; }\n\n .player-dot {\n position: absolute; width: 46px; height: 46px; background: #1e3a56; border: 2px solid white;\n border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center;\n color: white; cursor: grab; transition: transform 0.15s ease; z-index: 10;\n box-shadow: 0 4px 6px rgba(0,0,0,0.3);\n }\n .jersey-number { font-size: 0.95rem; font-weight: 800; line-height: 1; }\n .player-name { \n position: absolute; bottom: -22px; font-size: 0.7rem; font-weight: 700;\n background: rgba(0,0,0,0.75); padding: 2px 6px; border-radius: 4px;\n white-space: nowrap;\n }\n\n .control-panel { flex:1; min-width:320px; background:#f8f9fa; border-radius:12px; padding:20px; box-shadow:0 4px 12px rgba(0,0,0,0.05); height: fit-content; }\n .player-input-list { display: flex; flex-direction: column; gap: 8px; max-height: 550px; overflow-y: auto; }\n .player-input-group { display: grid; grid-template-columns: 35px 1fr 55px; align-items: center; gap: 8px; }\n .player-input-group input { padding:6px; border:1px solid #d0d6db; border-radius:4px; font-size:0.85rem; }\n\n .buttons-group { display:grid; grid-template-columns: 1fr 1fr; gap:10px; margin-top:20px; }\n .action-button { padding:12px; border:none; border-radius:8px; font-size:0.85rem; font-weight:600; cursor:pointer; transition:0.3s; color:white; }\n .update { background:#2ecc71; grid-column: span 2; font-size: 1rem; } \n .reset { background:#e74c3c; }\n .capture { background:#3498db; } \n .save { background:#34495e; } \n .load { background:#f1c40f; color:#333; }\n .download { background:#27ae60; margin-top: 10px; width: 100%; }\n \n .substitutes-list { margin-top:20px; display:flex; flex-wrap:wrap; gap:6px; }\n .substitute-player { background:#607D8B; color:white; padding:4px 10px; border-radius:12px; font-size:0.75rem; font-weight:600; }\n <\/style>\n<\/head>\n<body>\n <div class=\"app-container\">\n <h1>Visualizador de Formaci\u00f3n<\/h1>\n\n <div style=\"width:100%; text-align:center; margin-bottom:15px;\">\n <label style=\"font-weight:700; margin-right:10px;\">SISTEMA T\u00c1CTICO:<\/label>\n <select id=\"tacticSelect\" onchange=\"changeTactic()\" style=\"padding:8px; border-radius:4px;\">\n <option value=\"433\">4-3-3<\/option>\n <option value=\"442\">4-4-2<\/option>\n <option value=\"4231\">4-2-3-1<\/option>\n <option value=\"451\">4-5-1<\/option>\n <option value=\"352\">3-5-2<\/option>\n <option value=\"343\">3-4-3<\/option>\n <option value=\"532\">5-3-2<\/option>\n <option value=\"541\">5-4-1<\/option>\n <option value=\"4141\">4-1-4-1<\/option>\n <option value=\"4312\">4-3-1-2<\/option>\n <\/select>\n <\/div>\n\n <div class=\"field-container\" id=\"footballField\">\n <div class=\"goal-left\"><\/div>\n <div class=\"goal-right\"><\/div>\n <\/div>\n\n <div class=\"control-panel\">\n <div id=\"playerInputList\" class=\"player-input-list\"><\/div>\n\n <div class=\"buttons-group\">\n <button class=\"action-button update\" onclick=\"updateFormation()\">ACTUALIZAR CAMPO<\/button>\n <button class=\"action-button save\" onclick=\"saveFormation()\">GUARDAR DATOS<\/button>\n <button class=\"action-button load\" onclick=\"loadFormation()\">CARGAR DATOS<\/button>\n <button class=\"action-button capture\" onclick=\"captureFormation()\">CAPTURAR T\u00c1CTICA<\/button>\n <button class=\"action-button reset\" onclick=\"resetFormation()\">REINICIAR<\/button>\n <\/div>\n \n <div id=\"capturedImageDisplay\" style=\"margin-top:20px; text-align:center;\"><\/div>\n <div class=\"substitutes-list\" id=\"substitutesDisplay\"><\/div>\n <\/div>\n <\/div>\n\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/html2canvas\/1.4.1\/html2canvas.min.js\"><\/script>\n <script>\n const partidoID = \"formacion_actual\";\n const tactics = {\n '433': {'1':{l:'8%',t:'50%'},'4':{l:'28%',t:'20%'},'2':{l:'22%',t:'40%'},'6':{l:'22%',t:'60%'},'3':{l:'28%',t:'80%'},'5':{l:'45%',t:'50%'},'8':{l:'62%',t:'30%'},'10':{l:'62%',t:'70%'},'7':{l:'82%',t:'20%'},'11':{l:'82%',t:'80%'},'9':{l:'88%',t:'50%'}},\n '442': {'1':{l:'8%',t:'50%'},'4':{l:'28%',t:'15%'},'2':{l:'22%',t:'38%'},'6':{l:'22%',t:'62%'},'3':{l:'28%',t:'85%'},'8':{l:'55%',t:'30%'},'5':{l:'55%',t:'45%'},'10':{l:'55%',t:'55%'},'11':{l:'55%',t:'70%'},'7':{l:'82%',t:'35%'},'9':{l:'82%',t:'65%'}},\n '4231': {'1':{l:'8%',t:'50%'},'4':{l:'28%',t:'20%'},'2':{l:'22%',t:'38%'},'6':{l:'22%',t:'62%'},'3':{l:'28%',t:'80%'},'5':{l:'45%',t:'40%'},'8':{l:'45%',t:'60%'},'10':{l:'65%',t:'50%'},'7':{l:'80%',t:'18%'},'11':{l:'80%',t:'82%'},'9':{l:'90%',t:'50%'}},\n '451': {'1':{l:'8%',t:'50%'},'4':{l:'28%',t:'15%'},'2':{l:'22%',t:'38%'},'6':{l:'22%',t:'62%'},'3':{l:'28%',t:'85%'},'5':{l:'45%',t:'50%'},'8':{l:'60%',t:'30%'},'10':{l:'60%',t:'70%'},'7':{l:'75%',t:'15%'},'11':{l:'75%',t:'85%'},'9':{l:'90%',t:'50%'}},\n '352': {'1':{l:'8%',t:'50%'},'2':{l:'22%',t:'32%'},'5':{l:'18%',t:'50%'},'6':{l:'22%',t:'68%'},'4':{l:'45%',t:'15%'},'8':{l:'55%',t:'35%'},'10':{l:'55%',t:'65%'},'3':{l:'45%',t:'85%'},'7':{l:'70%',t:'50%'},'9':{l:'85%',t:'38%'},'11':{l:'85%',t:'62%'}},\n '343': {'1':{l:'8%',t:'50%'},'2':{l:'22%',t:'32%'},'5':{l:'18%',t:'50%'},'6':{l:'22%',t:'68%'},'4':{l:'48%',t:'15%'},'8':{l:'52%',t:'40%'},'10':{l:'52%',t:'60%'},'3':{l:'48%',t:'85%'},'7':{l:'80%',t:'18%'},'11':{l:'80%',t:'82%'},'9':{l:'90%',t:'50%'}},\n '532': {'1':{l:'8%',t:'50%'},'4':{l:'30%',t:'15%'},'2':{l:'22%',t:'35%'},'5':{l:'18%',t:'50%'},'6':{l:'22%',t:'65%'},'3':{l:'30%',t:'85%'},'8':{l:'55%',t:'30%'},'10':{l:'55%',t:'70%'},'7':{l:'52%',t:'50%'},'9':{l:'85%',t:'38%'},'11':{l:'85%',t:'62%'}},\n '541': {'1':{l:'8%',t:'50%'},'4':{l:'30%',t:'15%'},'2':{l:'22%',t:'35%'},'5':{l:'18%',t:'50%'},'6':{l:'22%',t:'65%'},'3':{l:'30%',t:'85%'},'8':{l:'55%',t:'25%'},'7':{l:'55%',t:'42%'},'10':{l:'55%',t:'58%'},'11':{l:'55%',t:'75%'},'9':{l:'88%',t:'50%'}},\n '4141': {'1':{l:'8%',t:'50%'},'4':{l:'28%',t:'15%'},'2':{l:'22%',t:'38%'},'6':{l:'22%',t:'62%'},'3':{l:'28%',t:'85%'},'5':{l:'42%',t:'50%'},'8':{l:'62%',t:'35%'},'10':{l:'62%',t:'65%'},'7':{l:'78%',t:'18%'},'11':{l:'78%',t:'82%'},'9':{l:'90%',t:'50%'}},\n '4312': {'1':{l:'8%',t:'50%'},'4':{l:'28%',t:'20%'},'2':{l:'22%',t:'40%'},'6':{l:'22%',t:'60%'},'3':{l:'28%',t:'80%'},'5':{l:'45%',t:'50%'},'8':{l:'60%',t:'30%'},'10':{l:'60%',t:'70%'},'7':{l:'72%',t:'50%'},'9':{l:'88%',t:'38%'},'11':{l:'88%',t:'62%'}}\n };\n\n let currentTactic = '433';\n const footballField = document.getElementById('footballField');\n const substitutesDisplay = document.getElementById('substitutesDisplay');\n const playerInputList = document.getElementById('playerInputList');\n let dragged = null;\n\n function generatePlayerInputs() {\n playerInputList.innerHTML = '';\n for (let i = 1; i <= 20; i++) { \/\/ Cambiado a 20\n const div = document.createElement('div');\n div.className = 'player-input-group';\n div.innerHTML = `<label>#${i}<\/label>\n <input type=\"text\" id=\"player${i}\" placeholder=\"Nombre\">\n <input type=\"number\" id=\"height${i}\" placeholder=\"cm\">`;\n playerInputList.appendChild(div);\n }\n }\n\n function makeDraggable(dot) {\n dot.addEventListener('mousedown', e => dragged = dot);\n dot.addEventListener('touchstart', e => { dragged = dot; e.preventDefault(); }, {passive: false});\n }\n\n const moveHandler = e => {\n if (dragged) {\n const rect = footballField.getBoundingClientRect();\n const clientX = e.type.includes('touch') ? e.touches[0].clientX : e.clientX;\n const clientY = e.type.includes('touch') ? e.touches[0].clientY : e.clientY;\n let x = ((clientX - rect.left) \/ rect.width * 100);\n let y = ((clientY - rect.top) \/ rect.height * 100);\n dragged.style.left = Math.max(0, Math.min(100, x)) + '%';\n dragged.style.top = Math.max(0, Math.min(100, y)) + '%';\n }\n };\n\n document.addEventListener('mousemove', moveHandler);\n document.addEventListener('touchmove', moveHandler, {passive: false});\n document.addEventListener('mouseup', () => dragged = null);\n document.addEventListener('touchend', () => dragged = null);\n\n function changeTactic() {\n currentTactic = document.getElementById('tacticSelect').value;\n updateFormation();\n }\n\n function updateFormation() {\n footballField.querySelectorAll('.player-dot').forEach(e => e.remove());\n substitutesDisplay.innerHTML = '';\n for (let i = 1; i <= 20; i++) { \/\/ Cambiado a 20\n const name = document.getElementById(`player${i}`).value;\n const height = document.getElementById(`height${i}`).value;\n if (i <= 11) {\n const pos = tactics[currentTactic][i];\n const dot = document.createElement('div');\n dot.className = 'player-dot';\n dot.style.left = pos.l; dot.style.top = pos.t;\n dot.style.transform = 'translate(-50%, -50%)';\n dot.innerHTML = `<span class=\"jersey-number\">${i}<\/span>\n <span class=\"player-name\">${name || '---'}<\/span>`;\n footballField.appendChild(dot);\n makeDraggable(dot);\n } else if (name) {\n const sub = document.createElement('span');\n sub.className = 'substitute-player';\n sub.textContent = `#${i} ${name} ${height ? '('+height+'cm)' : ''}`;\n substitutesDisplay.appendChild(sub);\n }\n }\n }\n\n function captureFormation() {\n html2canvas(footballField).then(canvas => {\n const imgData = canvas.toDataURL('image\/png');\n const img = document.createElement('img');\n img.src = imgData; img.style.width = '100%'; img.style.marginTop = '10px';\n const dwnBtn = document.createElement('button');\n dwnBtn.className = 'action-button download';\n dwnBtn.innerText = 'DESCARGAR IMAGEN';\n dwnBtn.onclick = () => { const a = document.createElement('a'); a.download = 't\u00e1ctica.png'; a.href = imgData; a.click(); };\n const container = document.getElementById('capturedImageDisplay');\n container.innerHTML = ''; container.appendChild(img); container.appendChild(dwnBtn);\n });\n }\n\n function saveFormation() {\n const data = {};\n for (let i = 1; i <= 20; i++) { \/\/ Cambiado a 20\n data[i] = document.getElementById(`player${i}`).value;\n data['h'+i] = document.getElementById(`height${i}`).value;\n }\n localStorage.setItem(partidoID, JSON.stringify(data));\n alert('Guardado');\n }\n\n function loadFormation() {\n const data = JSON.parse(localStorage.getItem(partidoID) || '{}');\n for (let i = 1; i <= 20; i++) { \/\/ Cambiado a 20\n document.getElementById(`player${i}`).value = data[i] || '';\n document.getElementById(`height${i}`).value = data['h'+i] || '';\n }\n updateFormation();\n }\n\n function resetFormation() {\n for (let i = 1; i <= 20; i++) { \/\/ Cambiado a 20\n document.getElementById(`player${i}`).value = '';\n document.getElementById(`height${i}`).value = '';\n }\n updateFormation();\n }\n\n document.addEventListener('DOMContentLoaded', () => {\n generatePlayerInputs();\n loadFormation();\n });\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Visualizador de Formaci\u00f3n – F\u00fatbol 360 Pro Visualizador de Formaci\u00f3n SISTEMA T\u00c1CTICO: 4-3-34-4-24-2-3-14-5-13-5-23-4-35-3-25-4-14-1-4-14-3-1-2 ACTUALIZAR CAMPO GUARDAR DATOS CARGAR DATOS CAPTURAR T\u00c1CTICA REINICIAR<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-4069","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/futbol360.online\/futbol-360\/wp-json\/wp\/v2\/pages\/4069","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/futbol360.online\/futbol-360\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/futbol360.online\/futbol-360\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/futbol360.online\/futbol-360\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/futbol360.online\/futbol-360\/wp-json\/wp\/v2\/comments?post=4069"}],"version-history":[{"count":1,"href":"https:\/\/futbol360.online\/futbol-360\/wp-json\/wp\/v2\/pages\/4069\/revisions"}],"predecessor-version":[{"id":4070,"href":"https:\/\/futbol360.online\/futbol-360\/wp-json\/wp\/v2\/pages\/4069\/revisions\/4070"}],"wp:attachment":[{"href":"https:\/\/futbol360.online\/futbol-360\/wp-json\/wp\/v2\/media?parent=4069"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}