feat: splitted js in different modules

js/tabs.js

@@ -0,0 +1,36 @@
+// Pestañas (solo en móvil, ver css/main.css): alternar entre el panel de
+// "Secciones" y el de "Vista previa". A partir del breakpoint md la clase
+// `panel-hidden-mobile` no tiene efecto y ambos paneles quedan visibles
+// permanentemente, lado a lado. También la exportación a PDF, que se apoya
+// en showTab() para asegurarse de que "Vista previa" esté visible antes de
+// imprimir.
+
+import { panelTop, panelOutput } from './dom-refs.js';
+
+const tabSections = document.getElementById('tab-sections');
+const tabOutput = document.getElementById('tab-output');
+
+function showTab(tab) {
+  const showSections = tab === 'sections';
+  panelTop.classList.toggle('panel-hidden-mobile', !showSections);
+  panelOutput.classList.toggle('panel-hidden-mobile', showSections);
+  tabSections.classList.toggle('tab-active', showSections);
+  tabOutput.classList.toggle('tab-active', !showSections);
+}
+
+tabSections.addEventListener('click', () => showTab('sections'));
+tabOutput.addEventListener('click', () => showTab('output'));
+
+// Exportar #panel-output a PDF: se usa el diálogo de impresión del propio
+// navegador (con "Guardar como PDF") en vez de una librería externa, ya que
+// las librerías tipo html2canvas no renderizan bien los colores oklch que
+// usa Tailwind v4. La hoja de estilos de impresión (css/main.css) aísla
+// #panel-output para que solo se exporte el resultado.
+document.getElementById('export-pdf').addEventListener('click', () => {
+  // `panel-hidden-mobile` está restringida a "screen" en el CSS, así que
+  // nunca debería afectar a la impresión, pero por si algún navegador
+  // calcula el ancho de la vista de impresión igual al de pantalla en
+  // móvil, se cambia de pestaña antes de imprimir para curarse en salud.
+  showTab('output');
+  window.print();
+});