Mapping Fase 2: malla deformable (superficies curvas) + mascaras

- Superficies con rejilla n x n (hasta 6x6): arrastra cualquier punto para
  curvar, no solo las esquinas. Render perspectiva-correcto por celda
  (homografia cuadrado->celda).
- Mascaras: cuadrilateros negros que tapan zonas / recortan derrames de luz.
- Editable desde la previsualizacion del panel (raton/tactil) y el escenario:
  arrastrar puntos, +/- malla para subdividir, borrar por lista.
- set_mapping acepta "masks"; persiste en data/mapping.json (ignorado en git).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

web/panel/index.html

@@ -261,18 +261,24 @@
           <input type="checkbox" id="map-edit"> Modo edicion (arrastrar en el escenario)
         </label>
         <div class="row">
-          <button id="map-add" class="cmd accent">+ Anadir superficie</button>
+          <button id="map-add" class="cmd accent">+ Superficie</button>
+          <button id="map-add-mask" class="cmd">+ Mascara</button>
           <button id="map-reset" class="cmd">Reset</button>
         </div>
-        <span class="label">Previsualizacion (arrastra las esquinas)</span>
+        <span class="label">Previsualizacion (arrastra los puntos)</span>
         <canvas id="map-preview"
           style="width:100%;aspect-ratio:16/9;background:#0a0a0a;border:1px solid #333;border-radius:6px;display:block;margin:6px 0;touch-action:none;cursor:crosshair;"></canvas>
+        <div class="row" id="map-selbar" hidden>
+          <span class="label" id="map-selinfo">Superficie seleccionada</span>
+          <button id="map-sub-dec" class="cmd">&minus; malla</button>
+          <span id="map-sub-val" class="value">1x1</span>
+          <button id="map-sub-inc" class="cmd">+ malla</button>
+        </div>
         <div id="map-list"></div>
-        <p class="hint">1) Elige un motor que no sea projectM. 2) Pulsa
-          <b>Anadir superficie</b>. 3) <b>Arrastra las esquinas</b> aqui en la
-          previsualizacion (raton o dedo) para encajar la forma; se ve en el
-          proyector al instante. Cada superficie mapea la misma imagen. Se
-          guarda solo.</p>
+        <p class="hint">Arrastra los puntos para deformar. Selecciona una
+          superficie y usa <b>+ malla</b> para subdividir y <b>curvarla</b>.
+          <b>+ Mascara</b> tapa zonas con un recuadro negro (recorta derrames
+          de luz). Se guarda solo.</p>
       </section>
 
     </div>