feat: improved user feedback

index.html

@@ -8,9 +8,9 @@
   <link rel="stylesheet" href="css/main.css">
   <link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css" />
   <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
-  <!-- Rellenada por js/dnd.js con el @page (tamaño/orientación) elegido en
-       "Personalización de página": un <style> aparte porque @page no se
-       puede cambiar como una propiedad normal desde JS. -->
+  <!-- Rellenada por js/page-settings.js con el @page (tamaño/orientación)
+       elegido en "Personalización de página": un <style> aparte porque
+       @page no se puede cambiar como una propiedad normal desde JS. -->
   <style id="page-size-style"></style>
 </head>
 
@@ -30,11 +30,20 @@
           <option value="en">English</option>
         </select>
         <button id="save-pattern" type="button" class="btn btn-sm btn-outline">Guardar</button>
-        <button id="load-pattern" type="button" class="btn btn-sm btn-outline">Cargar</button>
+        <button id="load-pattern" type="button" class="btn btn-sm btn-outline"
+          data-confirm-message="¿Seguro que quieres cargar el patrón guardado? Se perderán los cambios que no hayas guardado.">Cargar</button>
         <button id="export-pdf" type="button" class="btn btn-sm">Exportar a PDF</button>
       </div>
     </header>
 
+    <!-- Aviso breve de que "Guardar" ha funcionado: sin esto, guardar en
+         localStorage no da ninguna señal de que ha ocurrido algo. -->
+    <div id="save-toast" class="toast toast-top toast-end no-print hidden">
+      <div class="alert alert-success">
+        <span data-message="Guardado">Guardado</span>
+      </div>
+    </div>
+
     <div class="p-4 pt-0">
 
       <!-- Configuración única para todo el documento (no es una sección más:
@@ -130,7 +139,8 @@
             data-drag-title="Arrastrar para reordenar"
             data-collapse-title="Colapsar / expandir"
             data-duplicate-title="Duplicar sección"
-            data-remove-title="Eliminar sección"></div>
+            data-remove-title="Eliminar sección"
+            data-remove-confirm="¿Seguro que quieres eliminar este grupo? Se eliminarán también todas las secciones que contiene."></div>
         </section>
 
         <section id="panel-output" class="w-full md:w-1/2 border border-base-300 rounded-box p-4 panel-hidden-mobile">