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:

docs/module-creation-guide.md

@@ -48,6 +48,9 @@ Hard rules for module files:
 - `hook.php` is for server-side logic
 - Do NOT embed `<script>` tags in `index-base.tpl`
 - Do NOT put PHP logic in `index-base.tpl`
+- `script.js` and `style.css` are static files: do NOT use Twig syntax inside them
+- Do NOT use `{{ ... }}`, `{% ... %}`, `c-if`, `c-for`, or builder attributes inside `script.js` or `style.css`
+- If JavaScript needs dynamic values such as `section_id` or a hook endpoint, expose them from `index-base.tpl` via `data-*` attributes
 
 1. **Read style reference** (steps above)
 2. **`acai-write`** — Create the module files directly (`index-base.tpl`, `style.css`, `script.js`, optional `hook.php`) using project-relative paths and complete file contents.