{# Reutilizable componente de observaciones usando Quill.js #}
<div class="card mt-2" style="padding: 4px;">
  <p class="small fw-bold mb-1">Otras Observaciones</p>

  <div class="viewer-observaciones quill-viewer p-2"
       style="height: 30px; border: 1px solid #ccc;"></div>

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



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

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

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

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



<style>
  .quill-viewer .ql-editor {
    padding: 0;
    min-height: 25px;
    font-size: 12px;
  }

  .quill-viewer .ql-container {
    border: 1px solid #ccc; /* o el color que prefieras */
    border-radius: 4px;      /* opcional, para bordes redondeados */
  }
</style>