mas cambios codex

CLAUDE.md

@@ -120,14 +120,15 @@ Do NOT modify web-base files — they are shared across all projects.
 2. **NEVER use `mkdir` to create directories.** Instead, use `acai-write` to create the first file inside the directory — this creates parent directories automatically. For example, to create a new module, directly write the `index-base.tpl` file.
 3. Only edit `index-base.tpl` in modules — `index.tpl`, `index-twig.tpl`, and `builder.json` are auto-generated
 4. Editing or creating any `index-base.tpl` through `acai-write` or `acai-line-replace` triggers automatic compilation. `compile_module` is only for manual recovery when you need to force a recompile without changing the file.
-5. Use Twig **filters** (with `|`), never Twig functions
-6. Table names without `cms_` prefix everywhere
-7. Primary key is `num`, never `id`
-8. Upload fields are arrays — access with `[0].urlPath`
-9. Tailwind CSS as primary styling, custom CSS scoped with BEM when needed
-10. Twig concatenation uses `~` operator: `'value=' ~ variable`
-11. `enlace` (link) fields already include slashes — **NEVER modify an existing enlace** unless explicitly asked
-12. **NEVER modify the `controlador` field** of existing records — it defines whether a page is Builder or Standard
+5. `script.js` and `style.css` are static files — do NOT use Twig syntax inside them. Pass dynamic values from `index-base.tpl` via `data-*` attributes.
+6. Use Twig **filters** (with `|`), never Twig functions
+7. Table names without `cms_` prefix everywhere
+8. Primary key is `num`, never `id`
+9. Upload fields are arrays — access with `[0].urlPath`
+10. Tailwind CSS as primary styling, custom CSS scoped with BEM when needed
+11. Twig concatenation uses `~` operator: `'value=' ~ variable`
+12. `enlace` (link) fields already include slashes — **NEVER modify an existing enlace** unless explicitly asked
+13. **NEVER modify the `controlador` field** of existing records — it defines whether a page is Builder or Standard
 
 ## MCP Tools
 

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.