docs: data-field-show para condicionar campos y pestanas del panel de modulos

El doc cubria data-field-group (repartir vars en pestanas) pero no habia forma
documentada de condicionar que se ve: los modulos con modos excluyentes
ensenaban al usuario todos los campos de todos los modos a la vez.

Se documentan los dos atributos nuevos (data-field-show en el campo,
data-field-group-show en una var del grupo), que llegan al builder.json por el
mismo mecanismo generico que data-field-group, con la tabla de la gramatica y
un ejemplo de las dos formas de uso.

Dos avisos que ahorran el error tipico: el campo se referencia por su NOMBRE DE
VARIABLE y no por su label (los acentos se borran, no se transliteran: "Titulo"
es `ttulo`), y `campo=` significa vacio, que es la clave de la primera opcion de
todo `list`.

docs/01-builder-fields.md

@@ -3,11 +3,11 @@ title: "Campos editables del builder"
 tags: [builder, twig, html, modules]
 load_priority: 80
 load_when: [always]
-summary: "Atributos data-field-* (textfield, headfield, link, upload, list, multiv2, checkbox), agrupar campos en pestañas con data-field-group, c-if/c-for/c-class, c-form, componentes built-in del builder Acai."
+summary: "Atributos data-field-* (textfield, headfield, link, upload, list, multiv2, colors, colorpicker), agrupar campos en pestañas con data-field-group, c-if/c-for/c-class, c-form, componentes built-in del builder Acai."
 ---
 # Builder Fields — Campos editables del index-base.tpl
 
-Este documento define los campos editables que el usuario rellena desde el panel del builder de Acai. Cubre el atributo `data-field-type` con todos sus tipos (`textfield`, `headfield`, `textbox`, `wysiwyg`, `link`, `upload`, `uploadMulti`, `list`, `multiv2`, `colors`, `corners`, `ratio`), la regla `data-field-label` → nombre de variable, los atributos Acai (`c-if`, `c-else`, `c-for`, `c-class`, `c-hidden`, `c-required`), el tag `<set>`, la inclusión de módulos, los formularios `c-form` y los componentes built-in. Léelo antes de crear o modificar cualquier `index-base.tpl`.
+Este documento define los campos editables que el usuario rellena desde el panel del builder de Acai. Cubre el atributo `data-field-type` con todos sus tipos (`textfield`, `headfield`, `textbox`, `wysiwyg`, `link`, `upload`, `uploadMulti`, `list`, `multiv2`, `colors`, `colorpicker`, `corners`, `ratio`), la regla `data-field-label` → nombre de variable, los atributos Acai (`c-if`, `c-else`, `c-for`, `c-class`, `c-hidden`, `c-required`), el tag `<set>`, la inclusión de módulos, los formularios `c-form` y los componentes built-in. Léelo antes de crear o modificar cualquier `index-base.tpl`.
 
 ## Reglas de nomenclatura de variables
 
@@ -39,7 +39,7 @@ Reglas obligatorias:
 | `list` (fijo) | `<div data-list-options="...">` | Valor seleccionado |
 | `list` (tabla) | `<div data-list-table="...">` | `num` del registro |
 | `multiv2` | `<li>` wrapper | Array de objetos repetibles |
-| `checkbox` | `<div>` o `<input>` | `1` o `0` (número) |
+| `colors` | `<div data-field-colors="fondo,titulo">` | Objeto de N colores por nombre: `{{ colores.fondo }}` |
 | `colorpicker` | `<div>` | Hex color string |
 
 ### textfield
@@ -255,10 +255,9 @@ Selector de radio de borde en escala Tailwind. Mismo patrón que `colors`.
 
 Selector de proporción de imagen (16/9, 4/3, 1/1...).
 
-> **`checkbox` no existe.** Aparecía en versiones antiguas de este documento, pero el parser NO
+> Para un valor booleano usa `list` con dos opciones: el builder no tiene un tipo de casilla.
-> lo reconoce: un elemento con `data-field-type="checkbox"` se queda con `type` indefinido y el
+> (No lo confundas con el tipo `checkbox` de los campos de TABLA del CMS, que sí existe y se
-> compilador **descarta la variable en silencio** — no llega al `builder.json` y el campo nunca
+> documenta en `05-tables-and-fields.md`. Son dos vocabularios distintos.)
-> aparece en el panel. Para un booleano usa `list` con dos opciones.
 
 ## Agrupar campos en pestañas (`data-field-group`)
 
@@ -295,6 +294,54 @@ Recomendación de uso:
 - Reparto habitual: **Contenido** (textos e imágenes), **Estilos** (colores, alineación, bordes), **Ajustes** (opciones de comportamiento, límites, enlaces).
 - Mantén los nombres de grupo consistentes entre módulos y en español. Son literales: `Estilos` y `estilos` generan dos pestañas distintas.
 
+## Mostrar u ocultar campos y pestañas (`data-field-show`)
+
+Un campo o una pestaña entera pueden depender del valor de otro campo del mismo módulo. Se declara con dos atributos, que viajan al `builder.json` por el mismo mecanismo genérico que `data-field-group` (`customDataField.show` y `customDataField['group-show']`):
+
+- `data-field-show="campo=valor"` — en el elemento del campo que se quiere condicionar.
+- `data-field-group-show="campo=valor"` — en **una** var del grupo; condiciona la pestaña completa.
+
+Gramática:
+
+| Condición | Se muestra cuando |
+|-----------|-------------------|
+| `modo=1` | el valor es `1` |
+| `modo=1,2` | el valor es `1` o `2` |
+| `modo=` | el campo está **vacío** — es la clave de la primera opción de todo `list` |
+| `modo!=1` | el valor NO es `1` |
+| `modo=1;otro=2` | se cumplen ambas (AND) |
+
+El campo se referencia por su **nombre de variable**, no por su label: se aplican las [reglas de nomenclatura](#reglas-de-nomenclatura-de-variables), así que `Mostrar Estilos` se referencia como `mostrarestilos` y `Título` como `ttulo` (los acentos se borran, no se transliteran). Los valores no pueden contener coma ni punto y coma.
+
+```html
+<div c-hidden="true">
+  <!-- Pestaña completa: "Estilos" solo aparece si el usuario activa el switch -->
+  <div data-field-type="list" data-field-label="Mostrar Estilos" data-list-options="|No,1|Si"></div>
+  <div data-field-type="textfield"
+       data-field-label="Texto de Estilos"
+       data-field-group="Estilos"
+       data-field-group-show="mostrarestilos=1"></div>
+
+  <!-- Campo a campo: cada opción del list muestra su propio campo -->
+  <div data-field-type="list"
+       data-field-label="Modo Modulo"
+       data-list-options="|Opcion 1,1|Opcion 2,2|Opcion 3"
+       data-field-group="Contenido"></div>
+  <div data-field-type="textfield" data-field-label="Opcion 1" data-field-group="Contenido" data-field-show="modomodulo="></div>
+  <div data-field-type="textfield" data-field-label="Opcion 2" data-field-group="Contenido" data-field-show="modomodulo=1"></div>
+  <div data-field-type="textfield" data-field-label="Opcion 3" data-field-group="Contenido" data-field-show="modomodulo=2"></div>
+</div>
+```
+
+Comportamiento del panel:
+- **Ocultar no borra.** El valor sigue guardado y sigue llegando al Twig; si el usuario vuelve a mostrar el campo, lo escrito sigue ahí.
+- **Por eso la plantilla debe repetir la condición con `c-if`.** Ocultar el campo en el panel NO lo quita de la web: si `Texto de Estilos` no debe pintarse cuando `mostrarestilos` está a `0`, el `index-base.tpl` necesita su propio `c-if="mostrarestilos = '1'"`.
+- Una pestaña se oculta sola cuando todos sus campos han quedado ocultos por su `show`; en la mayoría de casos basta con condicionar los campos y no hace falta `data-field-group-show`.
+- Si varias vars del mismo grupo declaran `data-field-group-show`, **gana la primera** y las demás se ignoran.
+- Si una condición apunta a un campo que no existe (typo, o un label renombrado que cambió el nombre de variable), el campo **se muestra igualmente** y el aviso queda en la consola del navegador. Nunca desaparece en silencio.
+- Dentro de `multiv2` la condición se evalúa contra los valores **de ese item**, no contra los del módulo.
+- En modo traducción las condiciones se evalúan contra los valores del **idioma base**.
+
 ## Atributos Acai
 
 ### `c-if` — Renderizado condicional

docs/11b-rules-cheat-sheet.md

@@ -42,7 +42,7 @@ Resumen ejecutable de reglas críticas, tipos de campo, filtros y formatos de da
 | `list` (fijo) | `<div data-list-options="...">` | Valor seleccionado |
 | `list` (tabla) | `<div data-list-table="...">` | `num` del registro |
 | `multiv2` | `<li>` wrapper | Array de objetos |
-| `checkbox` | `<input>` o `<div>` | `1` / `0` |
+| `colors` | `<div data-field-colors="fondo,titulo">` | Objeto de N colores por nombre |
 | `colorpicker` | `<div>` | Hex color |
 
 Pestañas en el panel del módulo: `data-field-group="Estilos"` en el elemento del campo (sin group → pestaña "Principal").

docs/12-glossary.md

@@ -61,7 +61,7 @@ Definiciones cortas de los términos que aparecen en docs y prompts. Si te pierd
 
 **`c-form`** — atributo que convierte un `<form>` en un formulario que persiste a una tabla del CMS. Sintaxis: `<c-form tableName="'contacto'" captcha="true">`. Se renderiza como form HTML con submit a un endpoint Acai.
 
-**`data-field-*`** — familia de atributos que marca un elemento como editable en el builder visual. Tipos: `textfield`, `headfield`, `textbox`, `wysiwyg`, `link`, `upload`, `uploadMulti`, `list`, `multiv2`, `checkbox`, `colorpicker`.
+**`data-field-*`** — familia de atributos que marca un elemento como editable en el builder visual. Tipos: `textfield`, `headfield`, `textbox`, `wysiwyg`, `link`, `upload`, `uploadMulti`, `list`, `multiv2`, `colors`, `colorpicker`.
 
 **`c-if`, `c-for`, `c-class`, `c-hidden`, `c-required`** — atributos de lógica visual. **`c-if` usa un solo `=`** (`c-if="x = 1"`), Twig `{% if %}` usa **doble** `==`.