refactor(personajes): reorder capacity table grouped by grade (D→S), rows SS/SPS/BSS per grade, rowspan grouping

src/main/resources/META-INF/resources/static/css/app.css

@@ -979,3 +979,10 @@ header {
 footer.container p {
   color: #8b5a00;
 }
+
+/* ============================================
+   CAPACITY TABLE — block separators
+   ============================================ */
+.cap-block-divider {
+  border-top: 2px solid var(--pico-muted-border-color);
+}

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

@@ -176,11 +176,15 @@
             </tr>
           </thead>
           <tbody>
-            <template x-for="t in shots.TIPOS" :key="'row-' + t">
+            <template x-for="g in shots.GRADOS" :key="'block-' + g">
-              <template x-for="g in shots.GRADOS" :key="'cell-' + t + '-' + g">
+              <template x-for="t in shots.TIPOS" :key="'row-' + t + '-' + g">
-                <tr>
+                <tr :class="g !== shots.GRADOS[0] && t === shots.TIPOS[0] ? 'cap-block-divider' : ''">
                   <td class="text-bold" x-text="t"></td>
-                  <td class="text-center"><span class="grade-badge" x-text="g"></span></td>
+                  <template x-if="t === shots.TIPOS[0]">
+                    <td :rowspan="shots.TIPOS.length" class="text-center" style="vertical-align: middle;">
+                      <span class="grade-badge" x-text="g"></span>
+                    </td>
+                  </template>
                   <td class="text-right text-mono" x-text="fmtAdena(shots.referenceCapacity(t, g, 0))"></td>
                   <td class="text-right text-mono" x-text="fmtAdena(shots.referenceCapacity(t, g, 1))"></td>
                   <td class="text-right text-mono" x-text="fmtAdena(shots.referenceCapacity(t, g, 2))"></td>