calculadoratorneo.html

<style>
.calculadora-torneo-na{font-family:sans-serif;background-color:#f9f9f9;border:1px solid #ddd;padding:15px;max-width:900px;margin:20px auto}.calculadora-torneo-na h2,.calculadora-torneo-na h3{text-align:center;color:#333;border-bottom:1px solid #eee;padding-bottom:8px}.calculadora-torneo-na h3{font-size:1.1em;color:#555;margin-top:20px}.contenedor-partidos{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:10px;margin-bottom:20px}.partido{display:flex;align-items:center;justify-content:space-between;background:#fff;padding:8px;border:1px solid #e0e0e0}.partido[data-interzonal-key]{border:2px solid #0073aa}.partido-equipo{flex:1;font-size:.9em;font-weight:700}.partido-equipo.local{text-align:right;margin-right:5px}.partido-equipo.visitante{text-align:left;margin-left:5px}.partido-input{width:40px;text-align:center;font-size:1em;font-weight:700;border:1px solid #ccc;padding:4px}.partido-vs{font-size:.8em;color:#777;margin:0 4px}.calculadora-botones{display:flex;justify-content:center;gap:10px;margin:20px 0}.calculadora-botones button{padding:10px 20px;font-size:1em;font-weight:700;border:none;cursor:pointer}.calculadora-btn-calcular{background-color:#0073aa;color:#fff}.calculadora-btn-reset{background-color:#d54e21;color:#fff}.contenedor-tablas{display:grid;grid-template-columns:1fr;gap:20px}.tabla-posiciones{width:100%;border-collapse:collapse;font-size:.9em}.tabla-posiciones th,.tabla-posiciones td{border:1px solid #e0e0e0;padding:6px 4px;text-align:center}.tabla-posiciones th{background-color:#f0f0f0;font-weight:700}.tabla-posiciones td:nth-child(2){text-align:left;padding-left:5px;font-weight:500}.tabla-posiciones td:nth-child(3){font-weight:700;background-color:#f5f5f5}.tabla-posiciones tr.clasificado{background-color:#e0f7fa}.tabla-posiciones tr.clasificado td:nth-child(3){background-color:#d0f0f8}
</style>

<!-- CALCULADORA LITE -->
<div class="calculadora-torneo-na" id="calculadora-lite">
  <h2>CALCULADORA DE LA CLASIFICACIÓN</h2>
  <h3>Partidos que definen los Octavos de Final</h3>
  <div class="contenedor-partidos">
    <div class="partido" data-local="Estudiantes" data-visitante="Argentinos">
      <span class="partido-equipo local">Estudiantes</span>
      <input class="partido-input local-score" type="number" min="0" />
      <span class="partido-vs">vs</span>
      <input class="partido-input visitante-score" type="number" min="0" />
      <span class="partido-equipo visitante">Argentinos</span>
    </div>
    <div
      class="partido"
      data-local="Central Córdoba"
      data-visitante="Banfield"
    >
      <span class="partido-equipo local">C. Córdoba</span>
      <input class="partido-input local-score" type="number" min="0" />
      <span class="partido-vs">vs</span>
      <input class="partido-input visitante-score" type="number" min="0" />
      <span class="partido-equipo visitante">Banfield</span>
    </div>
    <div class="partido" data-local="Barracas" data-visitante="Huracán">
      <span class="partido-equipo local">Barracas</span>
      <input class="partido-input local-score" type="number" min="0" />
      <span class="partido-vs">vs</span>
      <input class="partido-input visitante-score" type="number" min="0" />
      <span class="partido-equipo visitante">Huracán</span>
    </div>
    <div class="partido" data-local="Belgrano" data-visitante="Unión">
      <span class="partido-equipo local">Belgrano</span>
      <input class="partido-input local-score" type="number" min="0" />
      <span class="partido-vs">vs</span>
      <input class="partido-input visitante-score" type="number" min="0" />
      <span class="partido-equipo visitante">Unión</span>
    </div>
    <div class="partido" data-local="Defensa" data-visitante="Ind. Rivadavia">
      <span class="partido-equipo local">Defensa</span>
      <input class="partido-input local-score" type="number" min="0" />
      <span class="partido-vs">vs</span>
      <input class="partido-input visitante-score" type="number" min="0" />
      <span class="partido-equipo visitante">Ind. Rivadavia</span>
    </div>
    <div class="partido" data-local="Lanús" data-visitante="Atl. Tucumán">
      <span class="partido-equipo local">Lanús</span>
      <input class="partido-input local-score" type="number" min="0" />
      <span class="partido-vs">vs</span>
      <input class="partido-input visitante-score" type="number" min="0" />
      <span class="partido-equipo visitante">Atl. Tucumán</span>
    </div>
    <div class="partido" data-local="San Lorenzo" data-visitante="Sarmiento">
      <span class="partido-equipo local">San Lorenzo</span>
      <input class="partido-input local-score" type="number" min="0" />
      <span class="partido-vs">vs</span>
      <input class="partido-input visitante-score" type="number" min="0" />
      <span class="partido-equipo visitante">Sarmiento</span>
    </div>
    <div class="partido" data-local="Instituto" data-visitante="Talleres">
      <span class="partido-equipo local">Instituto</span>
      <input class="partido-input local-score" type="number" min="0" />
      <span class="partido-vs">vs</span>
      <input class="partido-input visitante-score" type="number" min="0" />
      <span class="partido-equipo visitante">Talleres</span>
    </div>
    <div class="partido" data-local="Platense" data-visitante="Gimnasia">
      <span class="partido-equipo local">Platense</span>
      <input class="partido-input local-score" type="number" min="0" />
      <span class="partido-vs">vs</span>
      <input class="partido-input visitante-score" type="number" min="0" />
      <span class="partido-equipo visitante">Gimnasia</span>
    </div>
    <div
      class="partido"
      data-local="Aldosivi"
      data-visitante="San Martín"
      data-interzonal-key="Ald-SM"
    >
      <span class="partido-equipo local">Aldosivi</span>
      <input
        class="partido-input local-score"
        type="number"
        min="0"
        data-interzonal-input="Ald-SM-local"
      />
      <span class="partido-vs">vs</span>
      <input
        class="partido-input visitante-score"
        type="number"
        min="0"
        data-interzonal-input="Ald-SM-visitante"
      />
      <span class="partido-equipo visitante">San Martín</span>
    </div>
    <div class="partido" data-local="Godoy Cruz" data-visitante="Riestra">
      <span class="partido-equipo local">Godoy Cruz</span>
      <input class="partido-input local-score" type="number" min="0" />
      <span class="partido-vs">vs</span>
      <input class="partido-input visitante-score" type="number" min="0" />
      <span class="partido-equipo visitante">Riestra</span>
    </div>
    <div class="partido" data-local="Independiente" data-visitante="Central">
      <span class="partido-equipo local">Independiente</span>
      <input class="partido-input local-score" type="number" min="0" />
      <span class="partido-vs">vs</span>
      <input class="partido-input visitante-score" type="number" min="0" />
      <span class="partido-equipo visitante">Central</span>
    </div>
    <div class="partido" data-local="Vélez" data-visitante="River">
      <span class="partido-equipo local">Vélez</span>
      <input class="partido-input local-score" type="number" min="0" />
      <span class="partido-vs">vs</span>
      <input class="partido-input visitante-score" type="number" min="0" />
      <span class="partido-equipo visitante">River</span>
    </div>
    <div class="partido" data-local="Newell's" data-visitante="Racing">
      <span class="partido-equipo local">Newell's</span>
      <input class="partido-input local-score" type="number" min="0" />
      <span class="partido-vs">vs</span>
      <input class="partido-input visitante-score" type="number" min="0" />
      <span class="partido-equipo visitante">Racing</span>
    </div>
    <div class="partido" data-local="Boca Jrs." data-visitante="Tigre">
      <span class="partido-equipo local">Boca Jrs.</span>
      <input class="partido-input local-score" type="number" min="0" />
      <span class="partido-vs">vs</span>
      <input class="partido-input visitante-score" type="number" min="0" />
      <span class="partido-equipo visitante">Tigre</span>
    </div>
  </div>
  <div class="calculadora-botones">
    <button class="calculadora-btn-calcular">Calcular Posiciones</button>
    <button class="calculadora-btn-reset">Resetear</button>
  </div>
  <div
    style="
      color: #333;
      font-size: 0.9em;
      margin: 20px 0 15px 0;
      text-align: center;
    "
  >
    <span style="background-color: #e0f7fa"
      ><span
        style="
          border-radius: 4px;
          border: 1px solid #b2ebf2;
          padding: 3px 8px;
        "
        >&nbsp;</span
      ></span
    >
    = Clasificado a Octavos de Final
  </div>
  <div class="contenedor-tablas">
    <div class="grupo">
      <h3>GRUPO A</h3>
      <figure class="table">
        <table class="tabla-posiciones">
          <thead>
            <tr>
              <th>#</th>
              <th>Equipos</th>
              <th>PTS</th>
              <th>J</th>
              <th>Gol</th>
              <th>+/-</th>
              <th>G</th>
              <th>E</th>
              <th>P</th>
            </tr>
          </thead>
          <tbody id="tabla-body-a"></tbody>
        </table>
      </figure>
    </div>
    <div class="grupo">
      <h3>GRUPO B</h3>
      <figure class="table">
        <table class="tabla-posiciones">
          <thead>
            <tr>
              <th>#</th>
              <th>Equipos</th>
              <th>PTS</th>
              <th>J</th>
              <th>Gol</th>
              <th>+/-</th>
              <th>G</th>
              <th>E</th>
              <th>P</th>
            </tr>
          </thead>
          <tbody id="tabla-body-b"></tbody>
        </table>
      </figure>
    </div>
  </div>
</div>
<script>
const dataA={'Boca Jrs.':[26,15,26,12,7,5,3],Unión:[24,15,20,13,6,6,3],'Central Córdoba':[23,15,16,10,5,8,2],Tigre:[22,15,14,11,5,7,3],Barracas:[22,15,18,16,5,7,3],Racing:[22,15,15,13,6,4,5],Argentinos:[21,15,16,12,6,3,6],Estudiantes:[21,15,16,16,6,3,6],Banfield:[20,15,14,20,6,2,7],Belgrano:[19,15,13,11,4,7,4],Defensa:[19,15,14,17,5,4,6],Huracán:[19,15,9,14,5,4,6],Aldosivi:[15,15,9,16,4,3,8],"Newell's":[14,15,13,22,3,5,7],'Ind. Rivadavia':[13,15,12,17,2,7,6]};
const dataB={Central:[31,15,18,7,8,7,0],Riestra:[27,15,18,11,8,3,4],Lanús:[27,15,17,12,8,3,4],Vélez:[25,15,19,12,7,4,4],'San Lorenzo':[23,15,12,10,6,5,4],River:[21,15,20,15,6,3,6],Talleres:[20,15,9,12,5,5,5],'San Martín':[19,15,11,12,4,7,4],Sarmiento:[19,15,12,16,5,4,6],Gimnasia:[19,15,11,16,6,1,8],'Atl. Tucumán':[18,15,16,19,5,3,7],Independiente:[15,15,13,13,3,6,6],Instituto:[15,15,9,17,3,6,6],Platense:[12,15,12,22,2,6,7],'Godoy Cruz':[11,15,10,18,1,8,6]};
function renderizar(tbody,data,filterKeys){if(!tbody)return;const arr=filterKeys.map(nombre=>{const s=data[nombre],df=s[2]-s[3];return{nombre:nombre,pts:s[0],j:s[1],gf:s[2],gc:s[3],df:df,g:s[4],e:s[5],p:s[6]}});arr.sort((a,b)=>{if(a.pts!==b.pts)return b.pts-a.pts;if(a.df!==b.df)return b.df-a.df;return b.gf-a.gf});tbody.innerHTML="";arr.forEach((eq,i)=>{const row=document.createElement("tr");row.dataset.team=eq.nombre;if(i<8){row.classList.add("clasificado")}row.innerHTML=`<td>${i+1}</td><td>${eq.nombre}</td><td>${eq.pts}</td><td>${eq.j}</td><td>${eq.gf}:${eq.gc}</td><td>${eq.df>0?"+":""}${eq.df}</td><td>${eq.g}</td><td>${eq.e}</td><td>${eq.p}</td>`;tbody.appendChild(row)})}
document.addEventListener("DOMContentLoaded",()=>{const c=document.getElementById("calculadora-lite");if(!c)return;const btnsCalc=c.querySelectorAll(".calculadora-btn-calcular"),btnsReset=c.querySelectorAll(".calculadora-btn-reset"),tbodyA=c.querySelector("#tabla-body-a"),tbodyB=c.querySelector("#tabla-body-b");c.querySelectorAll("[data-interzonal-input]").forEach(input=>{input.addEventListener("input",e=>{const key=e.target.dataset.interzonalInput,val=e.target.value;c.querySelectorAll(`[data-interzonal-input="${key}"]`).forEach(other=>{if(other!==e.target)other.value=val})})});const calcular=()=>{let dA=JSON.parse(JSON.stringify(dataA)),dB=JSON.parse(JSON.stringify(dataB)),dG={...dA,...dB},proc=new Set();c.querySelectorAll(".partido").forEach(p=>{const lN=p.dataset.local,vN=p.dataset.visitante,key=[lN,vN].sort().join("-");if(proc.has(key))return;const lS_i=p.querySelector(".local-score"),vS_i=p.querySelector(".visitante-score"),lS=parseInt(lS_i.value,10),vS=parseInt(vS_i.value,10);if(!isNaN(lS)&&!isNaN(vS)){proc.add(key);const dL=dG[lN],dV=dG[vN];if(!dL||!dV)return;dL[1]++;dV[1]++;dL[2]+=lS;dL[3]+=vS;dV[2]+=vS;dV[3]+=lS;if(lS>vS){dL[0]+=3;dL[4]++;dV[6]++}else if(vS>lS){dV[0]+=3;dV[4]++;dL[6]++}else{dL[0]+=1;dV[0]+=1;dL[5]++;dV[5]++}}});renderizar(tbodyA,dG,Object.keys(dataA));renderizar(tbodyB,dG,Object.keys(dataB))};const reset=()=>{c.querySelectorAll(".partido-input").forEach(i=>{i.value=""});renderizar(tbodyA,dataA,Object.keys(dataA));renderizar(tbodyB,dataB,Object.keys(dataB))};btnsCalc.forEach(b=>b.addEventListener("click",calcular));btnsReset.forEach(b=>b.addEventListener("click",reset));reset()});
</script>