// Referencias a los elementos fijos del documento, en un único sitio para
// que el resto de módulos no repitan `document.getElementById` para lo
// mismo. Los módulos ES se ejecutan después de que el HTML esté parseado
// (como `defer`), así que no hace falta esperar a DOMContentLoaded.

export const outputText = document.getElementById('panel-output-text'); // Donde se pinta el resultado final.
export const panelTop = document.getElementById('panel-top'); // Todo el panel "Secciones" (incluye los botones "+ tipo"), usado como zona de detección al reordenar.
export const sectionsContainer = document.getElementById('panel-top-sections'); // Contiene las secciones que el usuario va añadiendo.
export const draggableItemsSource = document.getElementById('draggable-items-source'); // Lista oculta con los elementos disponibles para arrastrar: fuente de datos única, se clona (visible) en cada sección de tipo "arrastrar y soltar".
export const languageSelect = document.getElementById('language-select'); // Idioma del contenido (no de la interfaz): controla qué versión de los textos de título/subtítulo/texto se muestra y edita.
export const panelOutput = document.getElementById('panel-output');

// Controles de "Personalización de página": configuración única para todo
// el documento (no una sección más), ver page-settings.js.
export const pageTitleInput = document.getElementById('page-title-input');
export const pageAuthorInput = document.getElementById('page-author-input');
export const pageTextColorInput = document.getElementById('page-text-color');
export const pageBgColorInput = document.getElementById('page-bg-color');
export const pageFontSelect = document.getElementById('page-font-select');
export const pageSizeSelect = document.getElementById('page-size-select');
export const pageOrientationSelect = document.getElementById('page-orientation-select');
export const pageSizeStyle = document.getElementById('page-size-style');