mas cambios codex

docs/css-js-conventions.md

@@ -75,13 +75,26 @@ JavaScript scopeado al módulo usando `section_id`:
 This is the default and expected place for module JavaScript.
 Do NOT embed `<script>` tags directly inside `index-base.tpl` for normal module behavior.
 Keep `index-base.tpl` for HTML/Twig markup and put interactive logic in `script.js`.
+`script.js` is a static file: do NOT use Twig syntax inside it.
+Do NOT write `{{ section_id }}`, `{{ variable }}`, `{% if ... %}`, or builder attributes inside `script.js`.
+
+If JavaScript needs dynamic values, pass them from `index-base.tpl` through `data-*` attributes:
+
+```html
+<section
+  class="buscador-apartados"
+  data-section-id="{{ section_id }}"
+  data-hook-endpoint="/hooks/buscadorapartados_hjd8s/">
+</section>
+```
 
 ```js
-const section = document.getElementById('{{ section_id }}');
-if (section) {
+document.querySelectorAll('.buscador-apartados').forEach((section) => {
+  const sectionId = section.dataset.sectionId;
+  const hookEndpoint = section.dataset.hookEndpoint;
   const buttons = section.querySelectorAll('.btn');
   // ...
-}
+});
 ```
 
 ### CmsApi (Client-Side)
@@ -101,6 +114,16 @@ CmsApi.hook('/hooks/buscadorapartados_hjd8s/', { termino: 'vela' }, function(res
 });
 ```
 
+Do not try to build this endpoint with Twig inside `script.js`. Put the final endpoint in a `data-hook-endpoint` attribute in `index-base.tpl` if needed.
+
+### Module Styles (`style.css`)
+
+`style.css` is also a static file.
+Do NOT use Twig syntax or builder attributes inside it.
+Do NOT write selectors or values that depend on `{{ section_id }}`.
+
+Scope styles with the module root class instead of dynamic Twig ids.
+
 ### Cuándo usar Vue 3
 
 Usar Vue 3 CDN cuando la lógica requiera: