feat: improved user feedback

js/sections.js

@@ -17,7 +17,7 @@ import { makeDraggable, addDndItem, setupDropZone } from './dnd-items.js';
 // qué contenedor meter `section` (el nivel superior, o el de un grupo), y
 // `body` es donde hay que appendear el contenido propio de cada tipo.
 export function createSectionShell(typeLabel) {
-  const section = document.createElement('div');
+  const section = document.createElement('section');
   section.className = 'top-section border border-base-300 rounded-box p-4 flex flex-col gap-2';
 
   // Toda la cabecera es la zona de arrastre para reordenar (no solo el
@@ -92,9 +92,14 @@ export function createSectionShell(typeLabel) {
   collapseBtn.title = sectionsContainer.dataset.collapseTitle;
 
   // Etiqueta que indica de qué tipo es la sección (Título, Texto, Imagen...).
+  // 'section-badge' y data-type-label permiten a section-types.js (que no
+  // conoce la estructura interna de una sección) actualizar este texto con
+  // un nombre derivado del contenido ("Título: Bufanda de lana") sin perder
+  // de vista cuál es la etiqueta de tipo original.
   const badge = document.createElement('span');
-  badge.className = 'badge badge-sm badge-outline select-none';
+  badge.className = 'section-badge badge badge-sm badge-outline select-none';
   badge.textContent = typeLabel;
+  badge.dataset.typeLabel = typeLabel;
 
   const spacer = document.createElement('div');
   spacer.className = 'flex-1';
@@ -118,7 +123,15 @@ export function createSectionShell(typeLabel) {
   removeBtn.className = 'btn btn-xs btn-circle';
   removeBtn.textContent = '✕';
   removeBtn.title = sectionsContainer.dataset.removeTitle;
-  removeBtn.addEventListener('click', () => section.remove());
+  removeBtn.addEventListener('click', () => {
+    // Solo se confirma al eliminar un "Grupo" (reconocible por su propia
+    // clase 'group-container', sin necesidad de importar section-types.js):
+    // puede contener muchas secciones dentro, así que perderlo de un clic
+    // es mucho más costoso que perder una sección individual.
+    const isGroup = section.querySelector('.group-container') != null;
+    if (isGroup && !confirm(sectionsContainer.dataset.removeConfirm)) return;
+    section.remove();
+  });
 
   header.appendChild(dragHandle);
   header.appendChild(collapseBtn);