// === scenes/ficha.jsx — : EL FORMULARIO REAL DE DINAUP, dibujado de verdad === // // Lo cargan las escenas 01 y 02 a tamaño completo y la 03 en miniatura. Aquí dentro NO hay un solo // beat: todo lo que se mueve entra por props numéricas (0→1). El componente es estático y puro. // // EL HALLAZGO QUE GOBIERNA ESTE DIBUJO (verificado en código el 13/08/2026, DinaZen\Components\ // DinaupFlex\Forms\ + dinazen-forms.css): un formulario Dinaup es un LIENZO EN COORDENADAS // ABSOLUTAS. Cada campo se pinta con position:absolute; left/top/width/height. Se ve SIEMPRE A // VARIAS COLUMNAS: existe DnzFormMobileLayout.cs solo para reagrupar en vertical cuando la ventana // baja de 1000 px (.dnz-form-view{min-width:1000px}). // ⇒ la lista vertical de pares etiqueta-valor ES EL MODO MÓVIL. Aquí se dibuja el de ESCRITORIO, // a dos columnas, y por eso este archivo también se construye en coordenadas absolutas: las // anclas del campo protagonista salen de los mismos números que pinta el DOM, no de un ojímetro. // // FIDELIDAD (spec verificada): // · marco .dnz-form-view #f4f4f4 · cabecera 48px blanca con contadores · tira de modo 2px // (#93c5fd edición / #86efac alta) · título grande sin borde con raya inferior · 4 pestañas // («General» activa #3481e5) · lienzo #f0f1f3 con cards blancas SIN sombra y SIN título · pie // con Guardar verde y Cerrar rojo. // · campo: etiqueta .labelinput 11px/500 #6b7280 UPPERCASE con ancho fijo a la izquierda; // control 26px/13px, fondo #fff, borde #dfe5ec, radio 6, sombra 0 1px 2px. // · bloqueado: #fafafa + rayado diagonal −45°, borde #e2e2e2, texto #8b8b8b, etiqueta #999 y // candado a opacity .4 pegado detrás de la etiqueta. // · modificado: fondo #f0f9ff, borde #7dd3fc, etiqueta #0369a1 y punto 6px #0ea5e9 con halo. // · desplegable y relación: chevron abajo superpuesto al borde derecho a opacity .4 (NO una lupa); // la relación además lleva miniatura del registro a la izquierda del control. // · casilla: caja radio 4, marcada rellena #3481e5, etiqueta a su DERECHA y SIN mayúsculas. // · NINGÚN campo pinta icono de rol: DnzControl.razor no renderiza nunca DataControl.Icon. // // LO QUE NO ES PÍXEL REAL, y por qué (regla del plan: «se reproduce la disposición y las etiquetas, // no el píxel»): las fuentes van escaladas ×~1.45 sobre las reales (13 px sería ilegible a 1920), el // rayado del bloqueado sube de rgba(0,0,0,.018) a .045 porque .018 desaparece con la compresión de // vídeo, y el VALOR DEL CAMPO PROTAGONISTA se pinta a +6 px y semibold — es el único campo que la // voz señala y a 18 px no sostendría el plano de apertura. Todo lo demás son proporciones reales. // // REGLAS DEL MOTOR QUE ESTE ARCHIVO CUMPLE: función pura (ni Math.random, ni Date, ni useState/ // useEffect) · lienzo 1920×1080 · columna segura 4:5 (todo lo informativo entre x=568 y x=1352: // el marco va de 528 a 1392 y su padding de 40 deja el contenido justo en los 784 px útiles) · // cero NaN y cero undefined en el DOM · cierre con Object.assign. // ── Paleta, literal de dinazen-forms.css ──────────────────────────────────────────────────────── const FICHA_COL = { marco:'#f4f4f4', marcoBorde:'#eef1f5', cabeceraDe:'#f8fafc', cabeceraA:'#ffffff', lienzo:'#f0f1f3', card:'#ffffff', cardBorde:'#eef1f5', tiraEdicion:'#93c5fd', tiraAlta:'#86efac', texto:'#1b1d20', etiqueta:'#6b7280', suave:'#94a3b8', control:'#ffffff', controlBorde:'#dfe5ec', bloqFondo:'#fafafa', bloqBorde:'#e2e2e2', bloqTexto:'#8b8b8b', bloqEtiqueta:'#999999', modFondo:'#f0f9ff', modBorde:'#7dd3fc', modEtiqueta:'#0369a1', modPunto:'#0ea5e9', activa:'#3481e5', azul:'#0085FF', guardar:'#16a34a', cerrar:'#dc2626', }; // ── Geometría del formulario COMPLETO, en coordenadas locales del marco (origen 0,0 arriba-izq). // Ancho natural 864 = el recorte 4:5 exacto (528→1392). Padding 40 ⇒ contenido en 784 px. // Dos columnas asimétricas (354 / 406) y dos anchos de etiqueta (168 / 200): la columna 2 carga // las etiquetas y los valores más largos («PRECIO MEDIO COMPRA», «Suministros Vega»), medidos // uno a uno en el navegador. Un formulario Dinaup no tiene rejilla —cada campo lleva su // left/top/width— así que columnas distintas son fieles al modelo. Lo que SÍ es una desviación // consciente es el ancho de etiqueta por columna: en el producto .labelinput es fijo y una // etiqueta larga se corta con puntos suspensivos. Aquí no puede cortarse, porque las etiquetas // literales son parte de lo que la pieza enseña (regla del plan: disposición y etiquetas, no // píxel). Con estos números NINGUNA etiqueta y NINGÚN valor se recorta: verificado midiendo // scrollWidth contra clientWidth de las 33 cajas de texto. const FICHA_GEO = { ancho: 864, alto: 845, padX: 40, contW: 784, col1X: 40, col1W: 354, col2X: 418, col2W: 406, etiquetaW2: 200, cabecera: 54, tira: 3, titulo: 74, pestanas: 52, pie: 54, lienzoY: 183, lienzoPad: 16, cardX: 20, cardW: 824, cardPadX: 20, cardPadY: 18, cardGap: 14, card1: { y: 199, h: 186 }, card2: { y: 399, h: 230 }, card3: { y: 643, h: 132 }, // filas (y local de la fila; x = col1X | col2X). El alto de fila es FICHA_CAMPO.completa.filaH. fila: { referencia: 217, codigoBarras: 217, categoria: 271, marca: 271, descripcion:325, precio: 417, precioMedioCompra: 417, categoriaVenta: 471, proveedor: 471, unidadMedida: 525, peso: 525, casillas: 579, stockDisponible:661, stockInventario:661, modoGestion: 715, evaluarStock: 715, }, }; // ── Geometría del modo 'zoom': SOLO la fila del campo protagonista, ampliada ──────────────────── const FICHA_GEO_ZOOM = { ancho: 864, alto: 178, lienzoPad: 16, cardX: 20, cardY: 16, cardW: 824, cardH: 146, cardPadX: 20, cardPadY: 34, filaX: 40, filaY: 50, }; // ── Medidas de UN campo, por modo. Mismo componente, dos escalas. ─────────────────────────────── const FICHA_CAMPO = { completa: { etiquetaW:168, etiquetaGap:10, controlW:176, filaH:42, fEtiqueta:15, fControl:17, fProta:24, radio:8, padControl:10, gapMarca:6, gapMini:7, punto:9, candado:15, chevron:17, mini:24, subrayadoY:-7, subrayadoH:3, casilla:26, casillaRadio:6, fCasilla:17, casillaGap:10, casillasSep:40, }, zoom: { etiquetaW:300, etiquetaGap:20, controlW:464, filaH:78, fEtiqueta:28, fControl:40, fProta:44, radio:12, padControl:20, gapMarca:12, gapMini:14, punto:16, candado:26, chevron:32, mini:52, subrayadoY:-13, subrayadoH:5, casilla:44, casillaRadio:9, fCasilla:29, casillaGap:16, casillasSep:56, }, }; // ── Colocación por defecto en el lienzo 1920×1080 ─────────────────────────────────────────────── // completa: x 528..1392 · y 150..995 (informativo 568..1352; el contenido llega a y≈995, // que es lo que pide la regla «si no llega a y≈900, está pequeño»). // zoom: 864×178 centrado en vertical. const FICHA_BASE = { x:528, y:150, ancho:864, alto:845 }; const FICHA_BASE_ZOOM = { x:528, y:451, ancho:864, alto:178 }; // ── Cajas locales de las anclas (mismos números que pinta el DOM) ─────────────────────────────── // `precioEtiquetaTexto` es la caja de las LETRAS «PRECIO DE VENTA», no la de su columna de ancho // fijo: es la que hay que usar para el anillo del clic derecho y para colgar el menú, porque el // menú del producto sale del , es decir, del texto. Los anchos (132 y 246) están // MEDIDOS en el navegador con IBM Plex Sans 500, mayúsculas y letter-spacing 0.02em, a 15 y 28 px. const FICHA_LOCALES = { completa: { precioEtiqueta: { x: FICHA_GEO.col1X, y: FICHA_GEO.fila.precio, w: FICHA_CAMPO.completa.etiquetaW, h: FICHA_CAMPO.completa.filaH }, precioEtiquetaTexto: { x: FICHA_GEO.col1X, y: FICHA_GEO.fila.precio, w: 132, h: FICHA_CAMPO.completa.filaH }, precioControl: { x: FICHA_GEO.col1X + FICHA_CAMPO.completa.etiquetaW + FICHA_CAMPO.completa.etiquetaGap, y: FICHA_GEO.fila.precio, w: FICHA_CAMPO.completa.controlW, h: FICHA_CAMPO.completa.filaH }, precioFila: { x: FICHA_GEO.col1X, y: FICHA_GEO.fila.precio, w: FICHA_GEO.col1W, h: FICHA_CAMPO.completa.filaH }, tituloRegistro: { x: FICHA_GEO.padX, y: FICHA_GEO.cabecera + FICHA_GEO.tira, w: FICHA_GEO.contW, h: FICHA_GEO.titulo }, pestanaGeneral: { x: FICHA_GEO.padX, y: FICHA_GEO.cabecera + FICHA_GEO.tira + FICHA_GEO.titulo, w: 90, h: FICHA_GEO.pestanas }, cardComercial: { x: FICHA_GEO.cardX, y: FICHA_GEO.card2.y, w: FICHA_GEO.cardW, h: FICHA_GEO.card2.h }, }, zoom: { precioEtiqueta: { x: FICHA_GEO_ZOOM.filaX, y: FICHA_GEO_ZOOM.filaY, w: FICHA_CAMPO.zoom.etiquetaW, h: FICHA_CAMPO.zoom.filaH }, precioEtiquetaTexto: { x: FICHA_GEO_ZOOM.filaX, y: FICHA_GEO_ZOOM.filaY, w: 246, h: FICHA_CAMPO.zoom.filaH }, precioControl: { x: FICHA_GEO_ZOOM.filaX + FICHA_CAMPO.zoom.etiquetaW + FICHA_CAMPO.zoom.etiquetaGap, y: FICHA_GEO_ZOOM.filaY, w: FICHA_CAMPO.zoom.controlW, h: FICHA_CAMPO.zoom.filaH }, precioFila: { x: FICHA_GEO_ZOOM.filaX, y: FICHA_GEO_ZOOM.filaY, w: 784, h: FICHA_CAMPO.zoom.filaH }, }, }; // ── fichaAncla(clave, {x, y, ancho, escala, modo}) → caja EN COORDENADAS DE LIENZO ────────────── // Sirve para llevar el cursor exactamente a la etiqueta sin adivinar un número, con la ficha // colocada donde sea y a la escala que sea. Devuelve {x,y,w,h,cx,cy}; cx/cy es el centro. function fichaAncla(clave, opciones){ const o = opciones || {}; const modo = o.modo === 'zoom' ? 'zoom' : 'completa'; const base = modo === 'zoom' ? FICHA_BASE_ZOOM : FICHA_BASE; const x0 = (o.x === null || o.x === undefined) ? base.x : o.x; const y0 = (o.y === null || o.y === undefined) ? base.y : o.y; const anchoTotal = (o.ancho === null || o.ancho === undefined) ? base.ancho : o.ancho; const kAncho = (anchoTotal > 0 && base.ancho > 0) ? anchoTotal / base.ancho : 1; const esc = (o.escala === null || o.escala === undefined || !(o.escala > 0)) ? 1 : o.escala; const k = esc * kAncho; const L = FICHA_LOCALES[modo][clave]; if (!L) return { x:x0, y:y0, w:0, h:0, cx:x0, cy:y0 }; return { x: x0 + L.x*k, y: y0 + L.y*k, w: L.w*k, h: L.h*k, cx: x0 + (L.x + L.w/2)*k, cy: y0 + (L.y + L.h/2)*k, }; } // ── FICHA_ANCLAS: las cajas ya resueltas en la COLOCACIÓN POR DEFECTO. Si la escena mueve o // escala la ficha, usa fichaAncla(...) con los mismos x/y/ancho/escala que le pasó al componente. const FICHA_ANCLAS = { precioEtiqueta: fichaAncla('precioEtiqueta'), precioEtiquetaTexto: fichaAncla('precioEtiquetaTexto'), precioControl: fichaAncla('precioControl'), precioFila: fichaAncla('precioFila'), tituloRegistro: fichaAncla('tituloRegistro'), pestanaGeneral: fichaAncla('pestanaGeneral'), cardComercial: fichaAncla('cardComercial'), zoom: { precioEtiqueta: fichaAncla('precioEtiqueta', { modo:'zoom' }), precioEtiquetaTexto: fichaAncla('precioEtiquetaTexto', { modo:'zoom' }), precioControl: fichaAncla('precioControl', { modo:'zoom' }), precioFila: fichaAncla('precioFila', { modo:'zoom' }), }, base: FICHA_BASE, baseZoom: FICHA_BASE_ZOOM, }; // ── Iconos del formulario (trazo, como los del diálogo) ───────────────────────────────────────── function FichaIcono({ nombre, size = 20, color = 'currentColor', grosor = 1.8, style }){ const box = { width:size, height:size, display:'block', flexShrink:0, ...(style || {}) }; const p = { fill:'none', stroke:color, strokeWidth:grosor, strokeLinecap:'round', strokeLinejoin:'round' }; if (nombre === 'seccion'){ return (); } if (nombre === 'impresora'){ return (); } if (nombre === 'comentarios'){ return (); } if (nombre === 'adjuntos'){ return (); } if (nombre === 'galeria'){ return (); } if (nombre === 'cerrar'){ return (); } if (nombre === 'chevron'){ return (); } if (nombre === 'candado'){ return (); } if (nombre === 'check'){ return (); } if (nombre === 'ajustes'){ return (); } // rayo return (); } // ── Un CAMPO: etiqueta a la izquierda con ancho fijo (en MAYÚSCULAS) + control a su derecha ───── // Es la disposición .dnz-control con etiqueta izquierda de DnzControl.razor. Aquí no hay menú // contextual: eso lo pinta MenuContextualUnItem sobre las anclas de este archivo. function CampoFicha({ etiqueta = '', valor = '', tipo = 'texto', // 'texto' | 'desplegable' | 'relacion' estado = 'normal', // 'normal' | 'bloqueado' | 'modificado' mini = null, // inicial de la miniatura del registro relacionado geo = null, anchoEtiqueta = null, anchoControl = null, protagonista = false, resaltado = false, apagado = 0, // 0→1, apaga SOLO el control (beat «no sobre el cuadro») subrayado = 0, // 0→1, dibuja el subrayado azul bajo la etiqueta, de izq a der }){ const g = geo || FICHA_CAMPO.completa; const ew = (anchoEtiqueta === null || anchoEtiqueta === undefined) ? g.etiquetaW : anchoEtiqueta; const cw = (anchoControl === null || anchoControl === undefined) ? g.controlW : anchoControl; const bloq = estado === 'bloqueado'; const mod = estado === 'modificado'; const ap = clamp(apagado || 0, 0, 1); const sub = clamp(subrayado || 0, 0, 1); const txt = (valor === null || valor === undefined) ? '' : String(valor); const conChevron = tipo === 'desplegable' || tipo === 'relacion'; const conMini = tipo === 'relacion' && mini !== null && mini !== undefined && mini !== ''; const colEtiqueta = bloq ? FICHA_COL.bloqEtiqueta : (mod ? FICHA_COL.modEtiqueta : FICHA_COL.etiqueta); const colValor = bloq ? FICHA_COL.bloqTexto : FICHA_COL.texto; const borde = bloq ? FICHA_COL.bloqBorde : (mod ? FICHA_COL.modBorde : FICHA_COL.controlBorde); // rayado diagonal −45° del campo autocalculado (alpha subida de .018 a .045: a .018 el vídeo la come) const fondo = bloq ? `repeating-linear-gradient(-45deg, rgba(0,0,0,0.045) 0 2px, rgba(0,0,0,0) 2px 6px), ${FICHA_COL.bloqFondo}` : (mod ? FICHA_COL.modFondo : FICHA_COL.control); const padDer = conChevron ? Math.round(g.padControl + g.chevron*0.55) : g.padControl; const fValor = protagonista ? g.fProta : g.fControl; return (
{resaltado ? ( ) : null} {/* ── Etiqueta: ancho FIJO, una línea, mayúsculas; el marcador de estado va pegado detrás ── */}
{etiqueta} {sub > 0 ? ( ) : null} {bloq ? : null} {mod ? ( ) : null}
{/* ── Control ── */}
0 ? `saturate(${lerp(1, 0.55, ap)})` : 'none', }}> {conMini ? ( {String(mini).charAt(0).toUpperCase()} ) : null} {txt} {conChevron ? ( ) : null}
); } // ── Una CASILLA: caja + etiqueta a su DERECHA y SIN mayúsculas (.labelch) ─────────────────────── function CasillaFicha({ etiqueta = '', marcada = false, geo = null, resaltada = false }){ const g = geo || FICHA_CAMPO.completa; return (
{resaltada ? ( ) : null} {marcada ? : null} {etiqueta}
); } // ── Una CARD del lienzo: blanca, radio 8, borde #eef1f5, SIN sombra y SIN título (la caja ES la // agrupación). Posicionada en coordenadas absolutas, como el formulario real. // El borde va como sombra INTERIOR, no como `border`: un borde real empuja 1 px el sistema de // coordenadas de los hijos y las anclas dejarían de caer donde dicen. Se ve exactamente igual. function FichaCard({ x, y, w, h, children }){ return (
{children}
); } // ── Contador de anotaciones de la cabecera: icono + badge píldora (gris si 0, azul si tiene) ──── function FichaContador({ icono, n }){ const v = (typeof n === 'number' && isFinite(n)) ? Math.max(0, Math.round(n)) : 0; const activo = v > 0; return ( {v} ); } // ===================================================================================== // — la ficha «Compresor 50 litros», sección Productos, pestaña General. // // t — reloj de la escena. El componente es ESTÁTICO por diseño: no lleva ni un // beat dentro; todo lo que se mueve llega ya resuelto en las props 0→1. // x, y — esquina superior izquierda en el lienzo 1920×1080. // ancho, alto — caja natural (por defecto 864×845; en 'zoom', 864×178). Cambiar `ancho` // reescala el conjunto manteniendo proporciones; `alto` solo estira el // lienzo gris (el pie va pegado abajo), no reflota nada. // escala — multiplicador sobre la caja. La miniatura de la escena 03 = ancho menor. // precio — valor del campo protagonista (string o número; se pinta tal cual). // estadoPrecio — 'normal' | 'modificado' (fondo #f0f9ff, borde #7dd3fc, etiqueta #0369a1 // y punto azul pegado detrás de la etiqueta). // atenuacion — 0→1 del conjunto: 0 = nítida; 1 = opacity 0.35 + saturate 0.55, que son // los dos números literales del plan para «la ficha se atenúa». // resaltarCampo — clave del campo a destacar con halo azul, o null. Claves: referencia, // codigoBarras, categoria, marca, descripcion, precio, precioMedioCompra, // categoriaVenta, proveedor, unidadMedida, peso, bloquearVenta, // descontinuado, esServicio, esPack, stockDisponible, stockInventario, // modoGestion, evaluarStock. // modo — 'completa' | 'zoom' (solo la fila del protagonista, ampliada). // apagarControlPrecio — 0→1: apaga SOLO el cuadro del protagonista («no sobre el cuadro»). // subrayadoPrecio — 0→1: dibuja el subrayado azul bajo su etiqueta («sobre el nombre»). // modoAlta — false = tira azul (edición, la nuestra); true = tira verde (alta). // ===================================================================================== function FichaProducto({ t = 0, x = null, y = null, ancho = null, alto = null, escala = 1, modo = 'completa', precio = '990,00', estadoPrecio = 'normal', atenuacion = 0, resaltarCampo = null, apagarControlPrecio = 0, subrayadoPrecio = 0, seccion = 'Productos', titulo = 'Compresor 50 litros', anotaciones = null, modoAlta = false, zIndex = 5, estilo = null, }){ const esZoom = modo === 'zoom'; const G = FICHA_GEO; const GZ = FICHA_GEO_ZOOM; const g = esZoom ? FICHA_CAMPO.zoom : FICHA_CAMPO.completa; const base = esZoom ? FICHA_BASE_ZOOM : FICHA_BASE; const px = (x === null || x === undefined) ? base.x : x; const py = (y === null || y === undefined) ? base.y : y; const anchoTotal = (ancho === null || ancho === undefined) ? base.ancho : ancho; const altoTotal = (alto === null || alto === undefined) ? base.alto : alto; const kAncho = (anchoTotal > 0 && base.ancho > 0) ? anchoTotal / base.ancho : 1; const esc = (escala > 0) ? escala : 1; const k = esc * kAncho; // escala total aplicada al marco const altoLocal = (altoTotal > 0 && kAncho > 0) ? altoTotal / kAncho : base.alto; const at = clamp(atenuacion || 0, 0, 1); const opa = lerp(1, 0.35, at); const sat = lerp(1, 0.55, at); const modPrecio = estadoPrecio === 'modificado'; const res = (clave) => resaltarCampo === clave; const precioTxt = (precio === null || precio === undefined) ? '' : String(precio); const anot = anotaciones || { impresora:0, comentarios:2, adjuntos:1, galeria:0 }; const marco = { position:'absolute', left:px, top:py, width:base.ancho, height:altoLocal, transform:`scale(${k})`, transformOrigin:'0% 0%', opacity:opa, filter:`saturate(${sat})`, background: esZoom ? FICHA_COL.lienzo : FICHA_COL.marco, borderRadius:12, // borde como sombra interior: ver la nota de FichaCard (las anclas dependen de esto) boxShadow:`inset 0 0 0 1px ${FICHA_COL.marcoBorde}, 0 2px 6px rgba(0,0,0,0.06)`, overflow:'hidden', zIndex, ...(estilo || {}), }; // ── Anchos de etiqueta y control por columna (los números salen de FICHA_GEO, no de la mano) ── const eW1 = g.etiquetaW; // columna 1 · 168 const eW2 = esZoom ? g.etiquetaW : G.etiquetaW2; // columna 2 · 200 const cW1 = G.col1W - eW1 - g.etiquetaGap; // 176 const cW2 = G.col2W - eW2 - g.etiquetaGap; // 196 const cWF = G.contW - eW1 - g.etiquetaGap; // 606 (fila a dos columnas) // ── El campo protagonista, idéntico en los dos modos ────────────────────────────────────────── const CampoPrecio = (anchoControl) => ( ); // ══════════════════════════ MODO ZOOM: solo la fila del protagonista ══════════════════════════ if (esZoom){ return (
{CampoPrecio(g.controlW)}
); } // ══════════════════════════ MODO COMPLETA ════════════════════════════════════════════════════ const lienzoH = Math.max(0, altoLocal - G.lienzoY - G.pie); const c1 = G.card1, c2 = G.card2, c3 = G.card3; const filaCol = (xLocal, yLocal, w) => ({ position:'absolute', left:xLocal, top:yLocal, width:w }); return (
{/* ── 1. Cabecera 48px: icono de sección + «Productos» + (i) · contadores · ✕ ───────────── */}
{seccion} i
{/* ── 2. Tira de modo: 2px bajo la cabecera. Azul = edición (la nuestra) ────────────────── */}
{/* ── 3. Título del registro: un cuadro grande sin borde, con raya inferior ─────────────── */}
{titulo}
{/* ── 4. Pestañas: General (activa) · Compra y venta · Inventario · Contabilidad ────────── */}
{['General','Compra y venta','Inventario','Contabilidad'].map((p, i)=>(
{p} {i === 0 ? : null}
))}
{/* ── 5. Lienzo gris con las cards flotando ────────────────────────────────────────────── */}
{/* ── CARD 1 · identificación ──────────────────────────────────────────────────────────── */}
{/* ── CARD 2 · comercial — aquí vive el PROTAGONISTA, y a su lado un autocalculado ─────── */}
{CampoPrecio(cW1)}
{/* ── CARD 3 · inventario — los dos stocks son autocalculados: rayado y candado ────────── */}
{/* Una casilla NO lleva etiqueta izquierda: caja + texto a su derecha, sin mayúsculas */}
{/* ── 7. Pie: extensiones a la izquierda · Guardar verde con check · Cerrar en rojo ─────── */}
{['ajustes','rayo'].map((n)=>( ))} Guardar Cerrar
); } Object.assign(window, { FichaProducto, FICHA_ANCLAS, fichaAncla, FICHA_BASE, FICHA_BASE_ZOOM, FICHA_GEO, FICHA_GEO_ZOOM, FICHA_CAMPO, FICHA_COL });