refactor(personajes): consolidate capacity table into single cross-character grid with totals

src/main/resources/templates/PageResource/personajes.html

@@ -160,53 +160,63 @@
     <article x-show="characters.length > 0">
       <header>
         <h2>💼 Capacidad de inventario de shots (por peso)</h2>
-        <p class="text-sm text-muted">Cada card muestra cuántos shots de cada tipo×grado caben en el inventario según el pasivo del personaje. Peso máx = baseWeight × (1 + skillLevel).</p>
+        <p class="text-sm text-muted">Cuántos shots de cada tipo×grado caben en el inventario según el pasivo de cada personaje. Peso máx = baseWeight × (1 + skillLevel).</p>
       </header>
 
-      <div class="flex-row gap-2" style="flex-wrap:wrap">
+      <div class="table-wrapper" style="overflow-x: auto;">
-        <template x-for="c in characters" :key="c.id">
+        <table style="font-size: 0.75rem;">
-          <article style="flex:1; min-width:320px; max-width:560px">
-            <header style="flex-wrap:wrap;gap:0.5rem;align-items:center">
-              <div>
-                <p class="text-sm text-bold" x-text="c.name" style="margin:0"></p>
-                <p class="text-xs text-muted" style="margin:0"
-                   x-text="c.characterClass + ' · Lv ' + c.level + ' · base ' + fmtAdena(c.baseWeight) + ' · ×' + (c.skillLevel + 1)"></p>
-              </div>
-              <span style="margin-left:auto"
-                    :class="c.skillLevel > 0 ? 'badge-success' : 'badge-muted'"
-                    x-text="c.skillLevel === 0 ? 'Sin pasivo' : 'Skill +' + (c.skillLevel * 100) + '%'"></span>
-            </header>
-
-            <p class="text-xs text-muted mt-2">Peso máx: <span class="text-bold text-mono" x-text="fmtAdena(maxWeightOf(c))"></span></p>
-
-            <div class="table-wrapper" style="margin-top:0.5rem">
-              <table style="font-size:0.7rem; margin:0">
           <thead>
             <tr>
-                    <th class="cell-label text-left"></th>
+              <th class="cell-label text-left" rowspan="2">Personaje</th>
-                    <template x-for="g in GRADOS" :key="g">
+              <th class="cell-label text-center" rowspan="2">Clase / Lv</th>
-                      <th class="cell-label text-right" x-text="g"></th>
+              <th class="cell-label text-right" rowspan="2">Peso máx</th>
+              <template x-for="t in shots.TIPOS" :key="t">
+                <th class="cell-label text-center" colspan="5" x-text="shots.tipoShort(t)"></th>
+              </template>
+              <th class="cell-label text-right" rowspan="2">Total shots</th>
+            </tr>
+            <tr>
+              <template x-for="t in shots.TIPOS" :key="'h-' + t">
+                <template x-for="g in shots.GRADOS" :key="t + '-' + g">
+                  <th class="cell-label text-center" x-text="g"></th>
+                </template>
               </template>
             </tr>
           </thead>
           <tbody>
-                  <template x-for="t in TIPOS" :key="t">
+            <template x-for="c in characters" :key="c.id">
               <tr>
-                      <td class="text-bold text-mono" x-text="tipoShort(t)"></td>
+                <td class="text-bold" x-text="c.name"></td>
-                      <template x-for="g in GRADOS" :key="t + '-' + g">
+                <td class="text-muted" style="white-space: nowrap;"
-                        <td class="text-right text-mono" x-text="fmtAdena(capacityOf(c, t, g))"></td>
+                    x-text="c.characterClass + ' · Lv ' + c.level"></td>
+                <td class="text-right text-mono">
+                  <span x-text="fmtAdena(shots.maxWeight(c))"></span>
+                  <span class="text-xs"
+                        :class="c.skillLevel > 0 ? 'badge-success' : 'badge-muted'"
+                        style="margin-left: 0.25rem;"
+                        x-text="c.skillLevel === 0 ? 'sin pasivo' : '+' + (c.skillLevel * 100) + '%'"></span>
+                </td>
+                <template x-for="t in shots.TIPOS" :key="'r-' + t">
+                  <template x-for="g in shots.GRADOS" :key="c.id + '-' + t + '-' + g">
+                    <td class="text-right text-mono" x-text="fmtAdena(shots.capacityOf(c, t, g))"></td>
                   </template>
+                </template>
+                <td class="text-right text-mono text-bold" x-text="fmtAdena(shots.totalCapacityOf(c))"></td>
               </tr>
             </template>
           </tbody>
-              </table>
+          <tfoot>
-            </div>
+            <tr>
-
+              <td class="cell-label" colspan="3">Totales</td>
-            <p class="text-xs text-muted mt-2">
+              <template x-for="t in shots.TIPOS" :key="'f-' + t">
-              Total 15 tipos: <span class="text-mono text-bold" x-text="fmtAdena(totalCapacityOf(c))"></span> shots
+                <template x-for="g in shots.GRADOS" :key="'f-' + t + '-' + g">
-            </p>
+                  <td class="text-right text-mono text-bold" x-text="fmtAdena(columnTotals[t + '-' + g])"></td>
-          </article>
                 </template>
+              </template>
+              <td class="text-right text-mono text-bold" x-text="fmtAdena(rowTotal())"></td>
+            </tr>
+          </tfoot>
+        </table>
       </div>
     </article>
 
@@ -256,6 +266,7 @@
         async loadCharacters() {
           try {
             this.characters = await window.api.listCharacters();
+            this.updateColumnTotals();
           } catch (e) {
             this.error = e.message || 'Error cargando personajes';
           } finally {
@@ -307,6 +318,30 @@
           return window.shots.totalCapacityOf(c);
         },
 
+        columnTotals: {},
+
+        rowTotal() {
+          let total = 0;
+          for (const c of this.characters) {
+            total += window.shots.totalCapacityOf(c);
+          }
+          return total;
+        },
+
+        updateColumnTotals() {
+          const totals = {};
+          for (const t of window.shots.TIPOS) {
+            for (const g of window.shots.GRADOS) {
+              let sum = 0;
+              for (const c of this.characters) {
+                sum += window.shots.capacityOf(c, t, g);
+              }
+              totals[t + '-' + g] = sum;
+            }
+          }
+          this.columnTotals = totals;
+        },
+
         async updateLevel(c) {
           if (c.level <= 0 || c.level > 100) {
             c.level = Math.min(100, Math.max(1, c.level));
@@ -325,6 +360,7 @@
           c.skillLevel = sk;
           try {
             await window.api.updateCharacterWeight(c.id, bw, sk);
+            this.updateColumnTotals();
           } catch (e) {
             this.error = e.message || 'Error al actualizar peso/skill';
           }