feat: visibilidad condicional de secciones en formularios

Builder:
- Separadores tienen nuevo panel "Visible solo si [campo] = [valor]"
- Selector de campo (checkbox/radio/select del mismo form)
- Selector de valor se actualiza dinámicamente al elegir el campo
- Badge visual en el canvas muestra la condición configurada
- Condición se guarda en campo.condicion { campo_id, valor }

form_cliente.php:
- iniciarCondiciones() evalúa condiciones al cargar y al cambiar campos
- Secciones sin la opción marcada se ocultan (max-height:0, pointer-events:none)
- Se muestran con transición suave al marcar la opción correspondiente
- Cada campo tiene data-campo-id para que la lógica pueda localizarlo

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

lab_formulario_builder.php

@@ -707,7 +707,10 @@ function renderPreview() {
 
 function renderCampoPreview(c) {
     if (c.tipo === 'separador') {
-        return `<hr class="preview-sep"><div class="preview-sep-label">${esc(c.label)}</div>`;
+        const condBadge = c.condicion
+            ? `<span title="Visible solo si: ${esc(c.condicion.valor)}" style="font-size:9px;background:#fff3cd;color:#856404;border-radius:4px;padding:1px 5px;margin-left:6px;vertical-align:middle"><i class="fas fa-eye-slash"></i> si: ${esc(c.condicion.valor)}</span>`
+            : '';
+        return `<hr class="preview-sep"><div class="preview-sep-label">${esc(c.label)}${condBadge}</div>`;
     }
     const req = c.required ? '<span style="color:#dc3545"> *</span>' : '';
     const lbl = `<label>${esc(c.label)}${req}</label>`;
@@ -779,7 +782,35 @@ function abrirEditorCampo(idx) {
     </div>`;
 
     if (c.tipo === 'separador') {
-        // solo label
+        // Campos con opciones que pueden controlar visibilidad
+        const camposOpciones = _campos.filter(f =>
+            ['checkbox','radio','select'].includes(f.tipo) && f.id !== c.id && (f.options||[]).length
+        );
+        const condCampoId = c.condicion?.campo_id || '';
+        const condValor   = c.condicion?.valor    || '';
+        const campoCtrl   = camposOpciones.find(f => f.id === condCampoId);
+        const optsCtrl    = campoCtrl ? (campoCtrl.options||[]) : [];
+
+        const optsCampos = camposOpciones.map(f =>
+            `<option value="${esc(f.id)}" ${f.id===condCampoId?'selected':''}>${esc(f.label)}</option>`
+        ).join('');
+        const optsValores = optsCtrl.map(o =>
+            `<option value="${esc(o)}" ${o===condValor?'selected':''}>${esc(o)}</option>`
+        ).join('');
+
+        html += `<hr class="my-2">
+        <div class="mb-2">
+            <label class="form-label small fw-semibold"><i class="fas fa-eye-slash me-1 text-warning"></i>Visibilidad condicional</label>
+            <div class="form-text mb-2">Esta sección (y los campos hasta el siguiente separador) se muestra solo si se cumple la condición.</div>
+            <select class="form-select form-select-sm mb-2" id="ce-cond-campo" onchange="actualizarOpcionesCondicion(this.value)">
+                <option value="">— Siempre visible —</option>
+                ${optsCampos}
+            </select>
+            <select class="form-select form-select-sm" id="ce-cond-valor" ${condCampoId?'':'disabled'}>
+                <option value="">— Selecciona campo primero —</option>
+                ${optsValores}
+            </select>
+        </div>`;
     } else if (c.tipo === 'linked') {
         html += `<div class="alert alert-info small py-2 mb-0">
             <i class="fas fa-info-circle me-1"></i>Campo vinculado al paciente. Se llenará automáticamente al enviar.
@@ -879,6 +910,17 @@ function abrirEditorCampo(idx) {
     setTimeout(() => document.getElementById('ce-label')?.select(), 200);
 }
 
+function actualizarOpcionesCondicion(campoId) {
+    const selValor = document.getElementById('ce-cond-valor');
+    if (!selValor) return;
+    if (!campoId) { selValor.innerHTML = '<option value="">— Selecciona campo primero —</option>'; selValor.disabled = true; return; }
+    const campo = _campos.find(f => f.id === campoId);
+    const opts  = campo?.options || [];
+    selValor.innerHTML = '<option value="">— Selecciona valor —</option>' +
+        opts.map(o => `<option value="${esc(o)}">${esc(o)}</option>`).join('');
+    selValor.disabled = false;
+}
+
 function _insertarKey(key) {
     const ta = document.getElementById('ce-contenido');
     if (!ta) return;
@@ -921,6 +963,17 @@ function aplicarCampo() {
         if (mc.length) c.modos = mc;
     }
 
+    // Condición de visibilidad (solo separadores)
+    const condCampo = document.getElementById('ce-cond-campo');
+    const condValor = document.getElementById('ce-cond-valor');
+    if (condCampo !== null) {
+        if (condCampo.value && condValor.value) {
+            c.condicion = { campo_id: condCampo.value, valor: condValor.value };
+        } else {
+            delete c.condicion;
+        }
+    }
+
     _bsCampo.hide();
     renderCanvas();
     renderPreview();