feat: agregar indicador de posición en campos de secciones y actualizar documentación

docs/componentes-de-interfaz.md

@@ -590,7 +590,7 @@ URLs de vista previa se liberan al cambiar de archivo o desmontar el componente.
 
 El alta y la edición de plantillas de activos y recursos agrupan los datos generales con `FormSection` e incorporan campos desde las cabeceras de sus grupos. `TemplateSectionsEditor` permite secciones apiladas o una cuadrícula responsive mediante `sectionLayout="stack" | "responsive"`, con una cabecera numerada sobre fondo diferenciado que contiene el input del nombre, el asa de arrastre y las acciones de orden y eliminación. El cuerpo conserva la descripción y un área de campos separada por un borde. `TemplateSectionEditor` encapsula cada sección con `Collapsible`: todas empiezan abiertas y un botón de cabecera permite plegarlas con ratón o teclado. El nombre, el asa y las acciones siguen visibles al plegar. El contenido permanece montado para conservar los controles; si la validación nativa detecta un control inválido oculto, la sección se abre antes de que el navegador lo enfoque. La apertura se conserva por identidad al reordenar y no se guarda como parte de la plantilla. Los editores de activos y recursos usan la cuadrícula responsive: una columna hasta 1.000 px de ancho disponible y dos a partir de ese umbral, con separación de 16 px y tarjetas de igual altura en cada fila, determinada por la sección más alta. El orden recorre cada fila de izquierda a derecha y se conserva en el DOM, la numeración, el teclado y el arrastre; la altura de cada fila se recalcula al plegar o desplegar sus secciones, manteniendo ambas tarjetas con la misma altura. El bloque «Sin sección» permanece debajo, a ancho completo.
 
-`TemplateSectionFields` muestra un título traducido y el número de campos. Cada campo tiene fondo propio. En la presentación `cards`, separa su nombre y acciones de la configuración de obligatoriedad y asignación, cuyo selector conserva una etiqueta visible; los editores de plantillas de activos y recursos utilizan la presentación `compact` descrita más abajo. Los campos se distribuyen en dos columnas a partir de 700 px de su propio grupo y en una para anchos menores; cada grupo establece su contenedor para evitar columnas demasiado estrechas cuando las secciones se muestran en paralelo. El bloque «Sin sección» se diferencia con borde discontinuo; las secciones vacías conservan un mensaje explícito. Se reutilizan los colores semánticos del tema para mantener el contraste en modo claro y oscuro.
+`TemplateSectionFields` muestra un título traducido y el número de campos. Cada fila presenta un indicador compacto de posición y total (`1/3`, `2/3`, etc.), junto al asa de ordenación. Se calcula dentro de cada sección o bloque «Sin sección» y se actualiza al reordenar, añadir, mover o quitar campos, tanto en `cards` como en `compact`. La misma información forma parte del nombre accesible del asa. Cada campo tiene fondo propio. En la presentación `cards`, separa su nombre y acciones de la configuración de obligatoriedad y asignación, cuyo selector conserva una etiqueta visible; los editores de plantillas de activos y recursos utilizan la presentación `compact` descrita más abajo. Los campos se distribuyen en dos columnas a partir de 700 px de su propio grupo y en una para anchos menores; cada grupo establece su contenedor para evitar columnas demasiado estrechas cuando las secciones se muestran en paralelo. El bloque «Sin sección» se diferencia con borde discontinuo; las secciones vacías conservan un mensaje explícito. Se reutilizan los colores semánticos del tema para mantener el contraste en modo claro y oscuro.
 
 ### Orden mediante arrastre y teclado
 

docs/patron-de-dialogos.md

@@ -56,6 +56,10 @@ estable y la ayuda inmediatamente encima del pie del modal.
 - Mantener más separación entre grupos principales que entre controles relacionados. En el
   patrón de plantillas, `TemplateMetadataSection` deja 36 px antes del grupo de secciones
   (20 px del cuerpo y 16 px adicionales); las columnas y tarjetas se separan 16 px.
+- En editores de campos agrupados por secciones, mostrar en cada fila su posición
+  dentro del grupo como `1/3`, `2/3`, etc. Reiniciar la numeración en cada sección
+  y en «Sin sección», y derivarla del orden actual, también después de mover,
+  añadir o quitar campos. Mantener esta información en el nombre accesible del asa.
 - Situar las acciones locales en la cabecera del grupo al que afectan. Por ejemplo,
   «Añadir campo» se ofrece en «Campos» y lleva implícita la sección de destino.
 

packages/rdx-ui/src/components/template-section-fields.tsx

@@ -162,6 +162,12 @@ export function TemplateSectionFields({
                   aria-describedby={`${prefix}-reorder-help`}
                   label={`${labels.reorder}: ${name} (${index + 1}/${grouped.length})`}
                 />
+                <span
+                  aria-hidden="true"
+                  className="inline-flex h-7 min-w-9 shrink-0 items-center justify-center rounded-md border bg-muted/30 px-1.5 text-xs font-medium text-muted-foreground tabular-nums"
+                >
+                  {index + 1}
+                </span>
                 {layout === "compact" && requiredSwitch}
                 <div className="min-w-0 flex-1">
                   <p