{# Componente reutilizable para mostrar información legal #}
<div class="card mt-3">
  <div class="viewer-legales quill-viewer border-0" style="text-align: justify;"></div>

  <script type="application/json" class="legales-data">
    {{ fsc.legales_1|json_encode|raw }}
  </script>
</div>

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const containers = document.querySelectorAll('.viewer-legales');
    const dataScripts = document.querySelectorAll('.legales-data');

    containers.forEach((el, i) => {
      const rawContent = dataScripts[i].textContent;
      const decodedContent = JSON.parse(rawContent);

      const quill = new Quill(el, {
        theme: 'snow',
        readOnly: true,
        modules: { toolbar: false }
      });

      quill.root.innerHTML = decodedContent;
    });
  });
</script>


<style>
  .quill-viewer .ql-editor {
    padding: 0;
    font-size: clamp(10px, 1.2vw, 12px);
  }
  .quill-viewer .ql-container {
    border: none;
  }
</style>