diff --git a/estudio_socio_economico/admin.py b/estudio_socio_economico/admin.py
index 61a4e9faffd0baad1836be9f64c963201f74a1bc..f5d3b9a4f9b68cbac665ccc9968cfe3174d21546 100644
--- a/estudio_socio_economico/admin.py
+++ b/estudio_socio_economico/admin.py
@@ -2,6 +2,9 @@ from django.contrib import admin
 from .models import Seccion, Opcion, Respuesta, RTextoCorto, RTextoParrafo, ROpcionMultiple, RCasillas, RDesplegable, Elemento
 # Register your models here.
 
+class ElementoAdmin(admin.ModelAdmin):
+    list_display = ('nombre', 'tipo', 'row', 'col')
+
 admin.site.register(Seccion)
 admin.site.register(Opcion)
 admin.site.register(Respuesta)
@@ -10,4 +13,4 @@ admin.site.register(RTextoParrafo)
 admin.site.register(ROpcionMultiple)
 admin.site.register(RCasillas)
 admin.site.register(RDesplegable)
-admin.site.register(Elemento)
\ No newline at end of file
+admin.site.register(Elemento, ElementoAdmin)
\ No newline at end of file
diff --git a/estudio_socio_economico/forms.py b/estudio_socio_economico/forms.py
new file mode 100644
index 0000000000000000000000000000000000000000..5fb49b8706d7144961b43815a8e067fcb4ec36dc
--- /dev/null
+++ b/estudio_socio_economico/forms.py
@@ -0,0 +1,60 @@
+from django import forms
+from .models import Seccion, Opcion, Elemento
+from django.forms import inlineformset_factory, modelformset_factory
+
+
+
+class SeccionForm(forms.ModelForm):
+    class Meta:
+        model = Seccion
+        fields = ['nombre', 'tipo']
+        widgets = {
+            'nombre': forms.TextInput(attrs={'class': 'form-control form-control-lg font-semi-bold border-3'}),
+            'tipo': forms.RadioSelect(attrs={'class': 'ms-3'}),
+        }
+        labels = {
+            'nombre': 'Nombre de la Sección',
+            'tipo': 'Tipo de la Sección',
+        }
+        
+        
+
+class OpcionForm(forms.ModelForm):
+    class Meta:
+        model = Opcion
+        fields = ['elemento', 'nombre']
+        widgets = {
+            'elemento': forms.Select(attrs={'class': 'form-control'}),
+            'nombre': forms.TextInput(attrs={'class': 'form-control'}),
+        }
+        labels = {
+            'elemento': 'Elemento',
+            'nombre': 'Nombre Opción',
+        }
+        
+        
+
+class ElementoForm(forms.ModelForm):
+    class Meta:
+        model = Elemento
+        fields = ['seccion', 'nombre', 'obligatorio', 'row', 'col', 'tipo',]
+        widgets = {
+            'seccion': forms.Select(attrs={'class': 'form-control border-3', 'placeholder': 'Selecciona una sección'}),
+            'nombre': forms.TextInput(attrs={'class': 'form-control font-semi-bold border-3 ', 'placeholder': 'Nombre de la pregunta'}),
+            'obligatorio': forms.CheckboxInput(attrs={'class': 'checkbox-principal form-check-input'}),            
+            'row': forms.NumberInput(attrs={'class': 'form-control border-3', 'type': 'hidden'}),
+            'col': forms.NumberInput(attrs={'class': 'form-control border-3', 'type': 'hidden'}),
+            'tipo': forms.Select(attrs={'class': 'form-select border-3', 'placeholder': 'Tipo de pregunta'}),
+        }
+        labels = {
+            'seccion': 'Sección',
+            'nombre': 'Nombre de la Pregunta',
+            'obligatorio': 'Obligatorio',            
+            'row': 'row',
+            'col': 'col',
+            'tipo': 'Tipo de Pregunta',            
+        }
+        
+SeccionFormSet = modelformset_factory(Seccion, form=SeccionForm, extra=0, can_delete=True)
+ElementoFormSet = inlineformset_factory(Seccion, Elemento, form=ElementoForm, extra=1, can_delete=True)
+
diff --git a/estudio_socio_economico/models.py b/estudio_socio_economico/models.py
index af3f99a97431be275f1ac3620c2bb38c1c9c84af..4f86a2c0e014fa3c10b11a0d7d8cf6639cb305ec 100644
--- a/estudio_socio_economico/models.py
+++ b/estudio_socio_economico/models.py
@@ -5,6 +5,7 @@ from django.core.validators import MinLengthValidator, MaxLengthValidator
 from django.db import models
 from model_utils.managers import InheritanceManager
 from usuarios.models import Solicitante
+import uuid
 
 class Seccion(models.Model):
     TIPOS_CHOICES = (
@@ -13,13 +14,14 @@ class Seccion(models.Model):
     )
 
     nombre = models.CharField(max_length=255)
-    tipo = models.CharField(max_length=10, choices=TIPOS_CHOICES)
+    tipo = models.CharField(max_length=10, choices=TIPOS_CHOICES, default=TIPOS_CHOICES[0])
 
     def __str__(self):
         return self.nombre
 
 
 class Opcion(models.Model):    
+    elemento = models.ForeignKey('Elemento', on_delete=models.CASCADE)
     nombre = models.CharField(max_length=255, verbose_name='Nombre Opción')
 
     def __str__(self):
@@ -87,11 +89,10 @@ class Elemento(models.Model):
 
     seccion = models.ForeignKey(Seccion, on_delete=models.CASCADE)
     nombre = models.CharField(max_length=255, verbose_name='Nombre')
-    obligatorio = models.BooleanField(default=True, verbose_name='Obligatorio')
-    lookup_id = models.UUIDField(verbose_name='Lookup ID')
-    order = models.IntegerField(verbose_name='Orden')
-    tipo = models.CharField(max_length=20, choices=TIPO_CHOICES, verbose_name='Tipo')
-    opciones = models.ManyToManyField(Opcion)
+    obligatorio = models.BooleanField(default=True, verbose_name='Obligatorio')    
+    row = models.IntegerField(verbose_name='row', default=100_000)
+    col = models.IntegerField(verbose_name='col', default=100_000)
+    tipo = models.CharField(max_length=20, choices=TIPO_CHOICES, verbose_name='Tipo')    
 
     def __str__(self):
         return self.nombre
@@ -112,4 +113,5 @@ class Elemento(models.Model):
 
     class Meta:
         verbose_name = 'Elemento'
-        verbose_name_plural = 'Elementos'
+        verbose_name_plural = 'Elementos'        
+        ordering = ['seccion','row', 'col', ]
diff --git a/estudio_socio_economico/templates/admin/config_estudioSE.html b/estudio_socio_economico/templates/admin/config_estudioSE.html
index bb7aee0df9bc8e5d42374540e32a979296f73d92..31936cf212194ee959c5cdc4f027cd890f839258 100644
--- a/estudio_socio_economico/templates/admin/config_estudioSE.html
+++ b/estudio_socio_economico/templates/admin/config_estudioSE.html
@@ -5,8 +5,393 @@
 {% endblock titulo %}
 
 {% block body %}
+    {% load custom_filters %}
+    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
+    <script>
+
+        function eliminarSeccion(parentDiv, seccionCont) {
+            const divPadre = document.getElementById(parentDiv);            
+            // Obtener el número de formularios presentes en el formset    
+            
+            const confirmacion = window.confirm("¿Estás seguro de que deseas eliminar esta Seccion y todas sus preguntas?");
+            if (confirmacion) {
+                // Crear el input para marcar el elemento para eliminar
+                const inputEliminar = document.createElement("input");
+                inputEliminar.type = "hidden";
+                inputEliminar.name = `seccion_formset-${seccionCont}-DELETE`;
+                inputEliminar.id = `id_seccion_formset-${seccionCont}-DELETE`;
+                inputEliminar.value = "on";                
+                divPadre.appendChild(inputEliminar);
+
+                // Ocultar el divPadre del formset                
+                divPadre.style.display = "none";
+
+            }
+            
+        }
+
+
+        function ocultarElementoExtra(parentDiv) {
+            const divPadre = document.getElementById(parentDiv);  
+            const divElementos = divPadre.getElementsByClassName("cont-elem");   
+            const divElemento = divElementos[divElementos.length-1]
+            divElemento.id = `${parentDiv}-baseElemForm`
+            // Obtener el número de formularios presentes en el formset    
+                                                    
+            // Ocultar el divPadre del formset            
+            divPadre.appendChild(divElemento);
+            divElemento.style.display = "none";                              
+        }
+        
+
+        function eliminarElemento(parentDiv, seccionID, elementCont) {
+            const divPadre = document.getElementById(parentDiv);            
+            // Obtener el número de formularios presentes en el formset    
+            
+            const confirmacion = window.confirm("¿Estás seguro de que deseas eliminar este elemento?");
+            if (confirmacion) {
+                // Crear el input para marcar el elemento para eliminar
+                const inputEliminar = document.createElement("input");
+                inputEliminar.type = "hidden";
+                inputEliminar.name = `elemento_formset_${seccionID}-${elementCont}-DELETE`;
+                inputEliminar.id = `id_elemento_formset_${seccionID}-${elementCont}-DELETE`;
+                inputEliminar.value = "on";                
+                divPadre.appendChild(inputEliminar);
+
+                // Ocultar el divPadre del formset
+                const divAbuelo = divPadre.parentNode.parentNode;
+                divAbuelo.appendChild(divPadre);
+                divPadre.style.display = "none";
+
+                revisarFilasVacias(divAbuelo.id)
+                updateRowColValues(divAbuelo.id)
+            }
+            
+        }
+
+        function updateRowColValues(divPadre){
+            // Obtener el elemento padre (parentDiv)
+            const parentDiv = document.getElementById(divPadre);
+
+            // Obtener todos los divs con clase "conte-sort" dentro de parentDiv
+            const conteSortDivs = parentDiv.getElementsByClassName("conte-sort");
+
+            // Recorrer los divs con clase "conte-sort"
+            for (let i = 0; i < conteSortDivs.length; i++) {
+                const conteSortDiv = conteSortDivs[i];
+
+                // Obtener todos los divs hijos con clase "cont-elem" dentro de cada "conte-sort" div
+                const contElemDivs = conteSortDiv.getElementsByClassName("cont-elem");
+
+                // Actualizar los valores de los campos hidden dentro de cada "cont-elem" div
+                for (let j = 0; j < contElemDivs.length; j++) {
+                    const contElemDiv = contElemDivs[j];
+                    const rowInput = contElemDiv.querySelector("input[id$='-row']");
+                    const colInput = contElemDiv.querySelector("input[id$='-col']");
+
+                    // Actualizar los valores de los campos hidden
+                    rowInput.value = i + 1; // El número de elemento conte-sort
+                    colInput.value = j + 1; // La posición dentro de los que tienen el mismo row
+                }
+            }
+        }
+
+        function renombrarConteSort(parentDiv) {
+            const divPadre = document.getElementById(parentDiv);
+            const filas = divPadre.getElementsByClassName('conte-sort');
+
+            for (let i = 0; i < filas.length; i++) {
+                const elemento = filas[i];
+                const idActual = elemento.id;
+                const partes = idActual.split('-');
+                const nuevoColid = i;
+
+                partes[2] = nuevoColid;
+                const nuevoId = partes.join('-');
+
+                elemento.id = nuevoId;
+            }            
+        }
+
+        function agregarNuevoConteSort(parentDiv) {
+            const divPadre = document.getElementById(parentDiv);
+            const filas = divPadre.getElementsByClassName('conte-sort');
+
+            // Obtener el último row y su id
+            const ultimoRow = filas[filas.length - 1];
+            const ultimoId = ultimoRow.id.split('-').pop(); // Extraer el número después del último guion
+            
+            // Crear un nuevo elemento row
+            const nuevoId = parseInt(ultimoId) + 1;
+            const nuevoRow = document.createElement('div');
+            const rowid = ultimoRow.id.split('-')[1];
+            nuevoRow.id = `elementos-${rowid}-${nuevoId}`;       
+            nuevoRow.classList.add('row', 'conte-sort', 'pagina-fondo', 'altura-min-100px');
+                             
+
+            // Insertar el nuevo script dentro del nuevoRow
+            nuevoRow.appendChild(document.createElement('script'));
+
+            // Insertar el nuevo row dentro del divPadre            
+            divPadre.insertBefore(nuevoRow, ultimoRow.nextSibling);            
+            initializeSortable(nuevoRow.id, rowid, '.handle2', 150, 'ghost', parentDiv);            
+        }
+
+        function revisarFilasVacias(parentDiv) {
+            const miDiv = document.getElementById(parentDiv);
+            const filas = miDiv.getElementsByClassName('conte-sort');
+                        
+            let todasFilasLlenas = true;
+
+            for (let i = filas.length - 1; i >= 0; i--) {
+                const fila = filas[i];
+                const elementosEnFila = fila.children;
+
+                // Verificar si la fila contiene un script pero no contiene otros elementos
+                let contieneScript = false;
+                let contieneOtroElemento = false;
+
+                for (let j = 0; j < elementosEnFila.length; j++) {
+                    const elemento = elementosEnFila[j];
+
+                    if (elemento.tagName === 'SCRIPT') {
+                        contieneScript = true;
+                    } else {
+                        contieneOtroElemento = true;
+                    }
+                    // Si la fila contiene un script pero también otros elementos, no la eliminamos
+                    if (contieneScript && contieneOtroElemento) {
+                        break;
+                    }
+                }
+
+                // Eliminar la fila si solo contiene un script y no tiene otros elementos
+                if (contieneScript && !contieneOtroElemento) {
+                fila.remove();                
+                renombrarConteSort(parentDiv);
+                todasFilasLlenas = false;
+                }
+            }
+            agregarNuevoConteSort(parentDiv);        
+        }
+
+        
+        function agregarNuevoElemento(parentDiv, seccionID) {
+            // Obtener el div padre que contiene los formularios
+            const divPadre = document.getElementById(parentDiv);
+            const filas = divPadre.getElementsByClassName('conte-sort');
+            const ultimaFila = filas[filas.length-1];
+               
+
+            // Obtener el total de formularios existentes en el formset
+            const total_elementos = document.getElementById(`id_elemento_formset_${seccionID}-TOTAL_FORMS`);
+            const elemnto_form_count = parseInt(total_elementos.value);
+            total_elementos.value = elemnto_form_count + 1;                      
+            
+            // Obtener el formulario original que será clonado   
+
+            const formularioOriginal = document.getElementById(`${parentDiv}-baseElemForm`);            
+
+            // Clonar el formulario original y cambiar su id y otros atributos para que sea único
+            const nuevoFormulario = formularioOriginal.cloneNode(true);
+            nuevoFormulario.style.display = "inline-block";
+            nuevoFormulario.id = `${parentDiv}-${elemnto_form_count+1}`;
+            nuevoFormulario.querySelectorAll("input, select").forEach((elemento) => {
+                const name = elemento.getAttribute("name");
+
+                const partes = name.split('-');                
+                partes[1] = elemnto_form_count;
+                const nuevoName = partes.join('-');                
+
+
+                elemento.setAttribute("name", nuevoName);
+                elemento.setAttribute("id", `id_${nuevoName}`);
+                if (elemento.getAttribute("type") === "checkbox") {
+                elemento.checked = true;
+                } else if (elemento.getAttribute("type") === "text") {
+                elemento.value = "";
+                }
+            });
+
+            // Agregar el nuevo formulario al div padre
+            ultimaFila.appendChild(nuevoFormulario);   
+            revisarFilasVacias(parentDiv)         
+        }
+
+
+        function initializeSortable(elementId, groupName, handleClass, animationTime, ghostClass, parentDiv) {
+            const element = document.getElementById(elementId);
+            let sortable = Sortable.create(element, {
+            group: groupName,
+            handle: handleClass,
+            animation: animationTime,
+            ghostClass: ghostClass,
+            swapThreshold: 0.9,
+            forceFallback: false,
+            onUpdate: function(evt) {
+                // Se ejecuta cuando se termina de reordenar los elementos
+                console.log("Nueva posición:", evt.newIndex);
+            },
+            onEnd: function(evt){                
+                if (parentDiv !== undefined) {
+                    console.log("Actualizando posicion:", evt.newIndex);
+                    updateRowColValues(parentDiv)
+                }                                        
+            },
+            onMove: function(evt) { 
+                if(evt.related.classList.contains('element-fixed')) { 
+                    return false; 
+                } 
+            },
+            onRemove: function(evt) {         
+                if (parentDiv !== undefined) {
+                    revisarFilasVacias(parentDiv);
+                }                
+            },
+            });
+        }
+    </script>
 
     {% include 'admin/config_nav.html' %}
-    <p class="h1"> Configuracion Estudio Socioeconomico (implementacion pendiente)</p>
+    <p class="h5 mx-5 mt-2"> Modificar Estudio Socioeconomico</p>
+
+    <form method="post" id="orderingForm">
+        {% csrf_token %}
+        <p><input type="submit" value="Save"></p>
+        <div id="secciones">
+            {{seccionFormset.management_form}}
+            {% for seccion in seccionFormset %}
+            {% with pDiv=forloop.counter0 %}
+                <div id="parentDiv-{{ pDiv }}" class="border border-2 rounded-2 p-3 pt-1 mx-3 mb-3 borde-pagina-principal">
+                    
+                    <div class="text-center"> 
+                        <i class="handle fa fa-bars" aria-hidden="true"></i>
+                    </div>          
+                    <div class="row mb-4 align-items-center">    
+                        {% for hidden in seccion.hidden_fields %}
+                            {{ hidden }}
+                        {% endfor %}                           
+                        <div class="col pe-0"> 
+                            {{ seccion.nombre.label }}    
+                            {{ seccion.nombre }}                                                       
+                        </div>
+                        <div class="col-auto text-center">
+                            <div class="font-semi-bold">
+                                {{ seccion.tipo.label }}   
+                            </div>                            
+                            <div >
+                                {% for choice in seccion.tipo %}
+                                    {{ choice }}                                    
+                                {% endfor %}  
+                            </div>                                                                                                                                                                      
+                        </div>
+                        <div class="col-auto p-0 m-0 text-center">                            
+                            <button id="btnEliminar" type="button" onclick="eliminarSeccion('parentDiv-{{ pDiv }}', '{{ forloop.counter0 }}')" class="btn btn-warning px-2 me-2 ms-2">
+                                <i class="fa fa-trash-o" style="font-size: 20px;"></i>
+                            </button>  
+                        </div>
+                    </div> 
+                    <div class="text-danger">
+                        {{ seccion.errors }}  
+                    </div> 
+                    
+                    {% with spk=seccion.instance.pk|stringformat:'s' %}                                  
+                        {% with elementoFormSet=dictElemForm|hashD:spk %}  
+                            {% if elementoFormSet %}
+                                {{ elementoFormSet.management_form}}
+
+                                {% with first=elementoFormSet.0 %}
+                                    {% if first %}
+                                        <div id="elementos-{{ spk }}-{{ first.row.value }}" class="row conte-sort pagina-fondo altura-min-100px"> 
+                                            <script></script>                                
+                                            
+                                            {% for elemento in  elementoFormSet%}
+                                                {% with epk=elemento.instance.pk|stringformat:'s' %}                                                                                                  
+                                                    
+                                                    <div id="elem-{{ spk }}-{{ forloop.counter0 }}" class="col cont-elem p-0 pagina-blanco" >
+                                                        <div class="border border-3 rounded-2 p-3 pt-1 mx-1 my-2 borde-pagina-gris">
+                                                            <div class="row text-center"> 
+                                                                <i class="col handle2 fa fa-bars" aria-hidden="true"></i>                                                    
+                                                            </div>    
+                                                            {% for hidden in elemento.hidden_fields %}
+                                                                {{ hidden }}
+                                                            {% endfor %}                                                                                                                  
+                                                            <div class="row align-items-center">
+                                                                <div class="col p-0 m-0 ms-1">                                                                    
+                                                                    {{ elemento.nombre }}                                                                                                             
+                                                                </div>     
+                                                                <div class="col-auto p-0 m-0">                                                                    
+                                                                    <button id="btnEliminar" type="button" onclick="eliminarElemento('elem-{{ spk }}-{{ forloop.counter0 }}', '{{ spk }}', '{{ forloop.counter0 }}')" class="btn btn-danger px-2 me-1 ms-2">
+                                                                        <i class="fa fa-trash-o" style="font-size: 20px;"></i>
+                                                                    </button>                                                                                                           
+                                                                </div>                                                  
+                                                            </div>  
+                                                            <div class="row my-1 align-items-center">                                                    
+                                                                <div class="col p-0 m-0 ms-1">
+                                                                    {{ elemento.tipo }}
+                                                                </div>            
+                                                                <div class="col-2 p-0 m-0 ms-2 text-center"> 
+                                                                    {{ elemento.obligatorio.label }}   
+                                                                    <div >
+                                                                        {% for choice in elemento.obligatorio %}
+                                                                            {{ choice }}                                    
+                                                                        {% endfor %}  
+                                                                    </div>                                                                                                                                       
+                                                                </div>                           
+                                                                <div class="col-2 p-0 m-0 ms-2">                                                                     
+                                                                    [insertar agregar opcion aqui]
+                                                                </div>           
+                                                            </div>
+                                                            <div class="text-danger">
+                                                                {{ elemento.errors }}
+                                                            </div>                                                                                                                                          
+                                                        </div>
+                                                        
+                                                    </div>                                        
+                                                    
+                                                    {% with c=elementoFormSet|hashD:forloop.counter %}
+                                                    {% with cb=elementoFormSet|hashD:forloop.counter0 %}
+                                                        {% if c.row.value != cb.row.value and c is not None %}
+                                                        </div>
+                                                        <div id="elementos-{{ spk }}-{{ c.row.value }}" class="row conte-sort pagina-fondo altura-min-100px"> 
+                                                        <script>
+                                                            initializeSortable('elementos-{{ spk }}-{{ cb.row.value }}', '{{ spk}}', '.handle2', 150, 'ghost', "parentDiv-{{ pDiv }}");        
+                                                        </script>
+                                                        {% endif %}
+                                                    {% endwith %}
+                                                    {% endwith %}
+                                                
+                                                {% endwith %}
+                                            {% endfor %}                                
+                                        </div>
+                                        {% with ultimo=elementoFormSet|last %}                                
+                                            <script>
+                                                initializeSortable('elementos-{{ spk }}-{{ ultimo.row.value }}', '{{ spk }}', '.handle2', 150, 'ghost', "parentDiv-{{ pDiv }}");        
+                                            </script>
+                                        {% endwith %}
+                                        <script>  
+                                            ocultarElementoExtra('parentDiv-{{ pDiv }}')
+                                            revisarFilasVacias('parentDiv-{{ pDiv }}')
+                                        </script>                                        
+                                        <button type="button" onclick="agregarNuevoElemento('parentDiv-{{ pDiv }}', '{{ spk }}')">Agregar nueva pregunta</button>
+                                    {% else %}                                        
+                                        <button type="button" onclick="agregarNuevoElemento('parentDiv-{{ pDiv }}', '{{ spk }}')">Agregar nueva pregunta</button>
+                                    {% endif %}
+                                {% endwith %}
+                            {% endif %}                                                                                       
+                        {% endwith %}                        
+                    {% endwith %}                       
+                </div>   
+            {% endwith%}
+            {% endfor %}
+        </div>
+    </form>
+
+    
+    <script>
+
+        initializeSortable('secciones', '', '.handle', 150, 'ghost');
+        
+    </script>
 
 {% endblock body %}
\ No newline at end of file
diff --git a/estudio_socio_economico/templatetags/__init__.py b/estudio_socio_economico/templatetags/__init__.py
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/estudio_socio_economico/templatetags/custom_filters.py b/estudio_socio_economico/templatetags/custom_filters.py
new file mode 100644
index 0000000000000000000000000000000000000000..0fd0fd32f155ce29deff8601cee07de881a68424
--- /dev/null
+++ b/estudio_socio_economico/templatetags/custom_filters.py
@@ -0,0 +1,13 @@
+from django import template
+import logging
+
+register = template.Library()
+logger = logging.getLogger(__name__)
+
+@register.filter
+def hashD(d, key):    
+    try:        
+        return d[key]
+    except Exception as e:
+        #logger.exception("Ocurrió una excepción al usar filtro: %s", str(e))
+        return None
\ No newline at end of file
diff --git a/estudio_socio_economico/viewsAdmin.py b/estudio_socio_economico/viewsAdmin.py
index 50a177260e5b31d902bb306426d2a886534f9103..a27931d351f69398996b8cf76f09556e86c8ab85 100644
--- a/estudio_socio_economico/viewsAdmin.py
+++ b/estudio_socio_economico/viewsAdmin.py
@@ -1,14 +1,72 @@
 from django.shortcuts import get_object_or_404, redirect, render
 from usuarios.views import verificarRedirect
 from usuarios.models import Usuario
+from .models import Seccion, Elemento, Opcion
+from.forms import SeccionFormSet, ElementoFormSet
 
 # Create your views here.
 
+# Crear el inline formset para Elemento    
+# Donde "ElementoForm" es el ModelForm personalizado para el modelo Elemento que definiste anteriormente.
 def configEstudio(request):
-
     usuario = get_object_or_404(Usuario, pk=request.user.id)  
     url = verificarRedirect(usuario, 'permiso_administrador')    
     if url:          #Verifica si el usuario ha llenaodo su informacion personal por primera vez y tiene los permisos necesarios
-        return redirect(url)
+        return redirect(url)  
+      
+    secciones = Seccion.objects.all()
+    seccionFormset = SeccionFormSet(queryset=secciones, prefix='seccion_formset')        
+    dictElemForm = {}
+    for seccion in secciones:
+        dictElemForm[str(seccion.id)] = ElementoFormSet(instance=seccion, prefix='elemento_formset_%s' % seccion.id)
+
+    if request.method == 'POST':                       
+        seccionFormset = SeccionFormSet(request.POST, prefix='seccion_formset')                        
+
+        if seccionFormset.is_valid(): # and elementoFormset.is_valid():
+            todoValido = True                                
+            dictElemForm = {}
+            seccionFormset.save()
+            for seccion in seccionFormset.forms:                            
+                seccionInstancia = seccion.instance
+                elementoFormset = ElementoFormSet(request.POST, prefix='elemento_formset_%s' % seccionInstancia.id, instance=seccionInstancia)                                     
+
+                elementoFormset.is_valid()
+                non_empty_forms = []
+                empty_forms = []
+                for form in elementoFormset.forms:                    
+                    if form.cleaned_data:
+                        non_empty_forms.append(form)
+                    else:
+                        empty_forms.append(form)
+                # Unir ambas listas para tener los formularios no vacíos al principio y los vacíos al final
+                ordered_forms = non_empty_forms + empty_forms                
+                # Actualizar el formset con la nueva lista de formularios
+                elementoFormset.forms = ordered_forms               
+
+                dictElemForm[str(seccionInstancia.id)] = elementoFormset                
+                if elementoFormset.is_valid():                                  
+                    elementoFormset.save()  
+                    pass   
+                else:   
+                    todoValido = False                                      
+            
+            print("todo valido: ")
+            print(todoValido)
+            if todoValido:
+                return redirect('estudioSE:AConfigEstudio')  
+        else:
+            print('seccion no valid')
+            print(seccionFormset.errors)
+            
+        
+
+    context = {
+        'seccionFormset': seccionFormset,
+        'dictElemForm': dictElemForm,
+    }
+    
+    
 
-    return render(request, 'admin/config_estudioSE.html')
\ No newline at end of file
+    return render(request, 'admin/config_estudioSE.html', context)
+        
\ No newline at end of file
diff --git a/static/css/main.css b/static/css/main.css
index a67ce1587db4da45e4c7b86040ff77b39c334248..ec4ef1713e5f22d0f74bb5649ae49cc011d35be9 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -11,6 +11,7 @@
   --cancelar-desactivado: rgba(233, 195, 193, 1);
   --cancelar-activado: rgba(234, 94, 94, 1);
   --pagina-fondo: #EEE5E5/*#F1ECEC*/;
+  --pagina-gris: #b9b4b4;
 }
 
 * {
@@ -25,6 +26,10 @@ body {
   background-color: var(--pagina-blanco) !important;
 }
 
+.pagina-fondo {
+  background-color: var(--pagina-fondo) !important;
+}
+
 .pagina-fuerte {
   background-color: var(--pagina-fuerte) !important;
 }
@@ -65,10 +70,18 @@ body {
   background-color: var(--cancelar-activado) !important;
 }
 
+.pagina-gris {
+  background-color: var(--pagina-gris) !important;
+}
+
 .borde-pagina-blanco {
   border-color: var(--pagina-blanco) !important;
 }
 
+.borde-pagina-gris {
+  border-color: var(--pagina-gris) !important;
+}
+
 .borde-pagina-fuerte {
   border-color: var(--pagina-fuerte) !important;
 }
@@ -105,6 +118,14 @@ body {
   border-color: var(--cancelar-activado) !important;
 }
 
+.borde-punteado {
+  border: 1px dashed #000; /* Puedes ajustar el color y el grosor según tus necesidades */
+}
+
+.altura-min-100px {
+  min-height: 30px;
+}
+
 /* Login */
 .login-contenedor {  
   max-width: 500px;
@@ -187,14 +208,45 @@ body {
   border-color: var(--pagina-tenue); 
 }
 
+/* Estilo para el checkbox principal */
+.checkbox-principal.form-check-input:checked {
+  background-color: var(--pagina-principal);
+  border-color: var(--pagina-fuerte);
+}
+
+.checkbox-principal.form-check-input:checked:focus {
+  box-shadow: 0 0 0 0.25rem var(--pagina-fuerte);
+}
+
+.checkbox-principal.form-check-input:checked:hover {
+  background-color: var(--pagina-principal);
+  border-color: var(--pagina-principal);
+}
+
+/* Estilo para el label (etiqueta) del checkbox principal */
+.checkbox-principal.form-check-label {
+  color: var(--pagina-fuerte);
+}
+
+.checkbox-principal.form-check-input:disabled {
+  background-color: var(--pagina-principal);
+  opacity: 0.65;
+}
+
+.handle {
+  cursor: move;  
+}
+
+.handle2 {
+  cursor: move;  
+}
 
 .nav .nav-link.active {
   border-left: 12px solid var(--pagina-principal); 
   background-color: var(--pagina-fuerte);
 }
 
-.nav-pills .nav-link.active{
-  border-left: 12px solid var(--pagina-principal); 
+.nav-pills .nav-link.active{  
   background-color: var(--pagina-fuerte);
 }
 
@@ -250,3 +302,35 @@ input[type=text], input[type=password], [type=email]{
 .errorlist {
   color: red;
 } */
+
+/* Clase para fuente normal */
+.font-normal {
+  font-weight: normal;
+}
+
+/* Clase para fuente en negrita */
+.font-bold {
+  font-weight: bold;
+}
+
+/* Clase para fuente semi-bold */
+.font-semi-bold {
+  font-weight: 600;
+}
+
+/* Clase para fuente ligera */
+.font-light {
+  font-weight: lighter;
+}
+
+/* Clase para fuente más negrita */
+.font-bolder {
+  font-weight: bolder;
+}
+
+/* Clase para fuente con peso personalizado */
+.font-custom-weight {
+  font-weight: 700; /* Cambia el valor a tu preferencia */
+}
+
+
diff --git a/usuarios/templates/admin/config_nav.html b/usuarios/templates/admin/config_nav.html
index 9b58ac97df4e1092bb97b0ace40904eea0672191..4aaf87280d2416df793c518f2d93f69b32ca9bcc 100644
--- a/usuarios/templates/admin/config_nav.html
+++ b/usuarios/templates/admin/config_nav.html
@@ -1,4 +1,4 @@
-<p class="mx-4 my-4 h3" >Configuración</p>
+<p class="mx-4 mt-4 h3" >Configuración</p>
 
 <nav class="navbar navbar-expand-lg navbar bg-white mx-3">          
     {% with url_name=request.resolver_match.url_name %}
diff --git a/usuarios/templates/admin/configuracion.html b/usuarios/templates/admin/configuracion.html
index 97311084010aa094982ce6671686c6afe6c36a15..534275c80667b980f3aa18f07a3a81278308d1db 100644
--- a/usuarios/templates/admin/configuracion.html
+++ b/usuarios/templates/admin/configuracion.html
@@ -1,5 +1,6 @@
 {% extends 'base.html' %}
 
 {% block body %}
+    {% include 'admin/config_nav.html' %}
     <p class="h1"> Pagina Configuración (implementacion pendiente)</p>
 {% endblock body %}
\ No newline at end of file
diff --git a/usuarios/templates/base.html b/usuarios/templates/base.html
index 897ca68eb49a62ec698a13ee37cfa32284cb68a2..490bafaaa2ff2a42f609f5be3da0ede969956947 100644
--- a/usuarios/templates/base.html
+++ b/usuarios/templates/base.html
@@ -6,6 +6,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
+    <script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
     <!-- Bootstrap CSS -->
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
@@ -29,7 +30,7 @@
           <div class="sticky-top d-flex flex-column justify-content-between flex-shrink-0 p-3 bg-light" style="max-width: 280px; height: 100vh;">
             <a href="#" class="d-flex flex-column align-items-center mb-3 mb-md-0 me-md-auto link-dark text-decoration-none">
               <img class="img-fluid w-75" src="{% static 'images/Logo cozcyt.png' %}" alt="Logo" >              
-              <span class="fs-4 h4">Sistema de impulso al Talento</span>
+              <span class="fs-4 h4">Sistema de impulso <br> al Talento</span>
             </a>
             <hr>
             {% with url_name=request.resolver_match.url_name %}
@@ -133,6 +134,7 @@
     <!-- Optional JavaScript; choose one of the two! -->
 
     <!-- Option 1: Bootstrap Bundle with Popper -->
+    
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
 
     <!-- Option 2: Separate Popper and Bootstrap JS -->
diff --git a/usuarios/templates/base_blank.html b/usuarios/templates/base_blank.html
index 2d01dd0f40fa3f3ef6dab431b5e6dab3663b50a0..d92d7e3ef3a235f5d95eadff23fe42790c071989 100644
--- a/usuarios/templates/base_blank.html
+++ b/usuarios/templates/base_blank.html
@@ -33,7 +33,7 @@
 
     <!-- Optional JavaScript; choose one of the two! -->
 
-    <!-- Option 1: Bootstrap Bundle with Popper -->
+    <!-- Option 1: Bootstrap Bundle with Popper -->    
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
 
     <!-- Option 2: Separate Popper and Bootstrap JS -->