diff --git a/routes_admin.py b/routes_admin.py
index 0fb7068..f64235e 100644
--- a/routes_admin.py
+++ b/routes_admin.py
@@ -362,51 +362,65 @@ def register_admin_routes(app):
     @app.route('/admin/rendiciones/edit/<int:id>', methods=['POST'])
     @admin_required
     def edit_rendicion(id):
+        conn = get_db_connection()
+        c = conn.cursor()
+
+        # Obtener datos básicos
         fecha = request.form.get('fecha')
         worker_id = request.form.get('worker_id')
-        modulo_id = request.form.get('modulo_id')
-        companion_id = request.form.get('companion_id')
-        
-        if companion_id == "":
-            companion_id = None
-
-        debito = request.form.get('venta_debito', '0').replace('.', '')
-        credito = request.form.get('venta_credito', '0').replace('.', '')
-        mp = request.form.get('venta_mp', '0').replace('.', '')
-        efectivo = request.form.get('venta_efectivo', '0').replace('.', '')
-        gastos = request.form.get('gastos', '0').replace('.', '')
-        observaciones = request.form.get('observaciones', '').strip()
+        modulo_id = request.form.get('modulo_id')  # Asegúrate de tener el input hidden en el HTML
+        companion_id = request.form.get('companion_id') or None
         
         worker_comision = 1 if request.form.get('worker_comision') else 0
         companion_comision = 1 if request.form.get('companion_comision') else 0
 
+        # Limpiador de dinero para manejar los puntos de miles
+        def clean_money(val):
+            if not val: return 0
+            return int(str(val).replace('.', '').replace('$', ''))
+
         try:
-            debito = int(debito) if debito else 0
-            credito = int(credito) if credito else 0
-            mp = int(mp) if mp else 0
-            efectivo = int(efectivo) if efectivo else 0
-            gastos = int(gastos) if gastos else 0
-        except ValueError:
-            flash("Los valores ingresados deben ser números válidos.", "danger")
-            return redirect(url_for('admin_rendiciones'))
+            debito = clean_money(request.form.get('venta_debito'))
+            credito = clean_money(request.form.get('venta_credito'))
+            mp = clean_money(request.form.get('venta_mp'))
+            efectivo = clean_money(request.form.get('venta_efectivo'))
+            gastos = clean_money(request.form.get('gastos'))
+            observaciones = request.form.get('observaciones', '').strip()
 
-        conn = get_db_connection()
-        c = conn.cursor()
-        
-        c.execute('''
-            UPDATE rendiciones 
-            SET fecha=?, worker_id=?, modulo_id=?, companion_id=?,
-                venta_debito=?, venta_credito=?, venta_mp=?, venta_efectivo=?, gastos=?, observaciones=?,
-                worker_comision=?, companion_comision=?
-            WHERE id=?
-        ''', (fecha, worker_id, modulo_id, companion_id, debito, credito, mp, efectivo, gastos, observaciones, worker_comision, companion_comision, id))    
-        conn.commit()
-        conn.close()
+            # 1. Actualizar cantidades de productos
+            # Recorremos el formulario buscando las cantidades editadas
+            for key, value in request.form.items():
+                if key.startswith('qty_'):
+                    # En el modal el name es 'qty_{{ item[6] }}' donde item[6] es el ID de rendicion_items
+                    ri_id = key.split('_')[1]
+                    nueva_qty = int(value or 0)
+                    
+                    # IMPORTANTE: Usamos 'precio_historico' que es el nombre real en tu DB
+                    c.execute('''UPDATE rendicion_items 
+                                SET cantidad = ? 
+                                WHERE id = ?''', (nueva_qty, ri_id))
+
+            # 2. Actualizar la rendición principal
+            c.execute('''
+                UPDATE rendiciones 
+                SET fecha=?, worker_id=?, modulo_id=?, companion_id=?,
+                    venta_debito=?, venta_credito=?, venta_mp=?, venta_efectivo=?, 
+                    gastos=?, observaciones=?, worker_comision=?, companion_comision=?
+                WHERE id=?
+            ''', (fecha, worker_id, modulo_id, companion_id, 
+                debito, credito, mp, efectivo, 
+                gastos, observaciones, worker_comision, companion_comision, id))    
+            
+            conn.commit()
+            flash("Rendición y productos actualizados correctamente.", "success")
+        except Exception as e:
+            conn.rollback()
+            flash(f"Error al actualizar: {str(e)}", "danger")
+        finally:
+            conn.close()
 
-        flash("Rendición actualizada correctamente.", "success")
         return redirect(url_for('admin_rendiciones'))
 
-
     @app.route('/admin/reportes')
     @admin_required 
     def admin_reportes_index():
diff --git a/templates/admin_rendiciones.html b/templates/admin_rendiciones.html
index 15d83c7..b7b39d1 100644
--- a/templates/admin_rendiciones.html
+++ b/templates/admin_rendiciones.html
@@ -49,7 +49,7 @@
                         </div>
 
                         {{ rendicion_detail_modal(r, r[16], r[17], r[18]) }}
-                        {{ edit_rendicion_modal(r, workers, modulos) }}
+                        {{ edit_rendicion_modal(r, r[16], workers, modulos) }}
                         
                         {{ confirm_modal(
                             id='deleteRendicion' ~ r[0],
@@ -74,54 +74,94 @@
 
 {% block scripts %}
 <script>
-    function calcTotalEdit(id) {
-        const getVal = (inputId) => parseInt(document.getElementById(inputId).value.replace(/\D/g, '')) || 0;
+    // Función para manejar las etiquetas de jornada (Full/Part Time)
+    function updateBadge(selectElement, badgeId) {
+        const option = selectElement.options[selectElement.selectedIndex];
+        const tipo = option.getAttribute('data-tipo');
+        const badgeDiv = document.getElementById(badgeId);
         
-        const debito = getVal(`edit_debito_${id}`);
-        const credito = getVal(`edit_credito_${id}`);
-        const mp = getVal(`edit_mp_${id}`);
-        const efectivo = getVal(`edit_efectivo_${id}`);
+        if (!badgeDiv) return;
         
-        const total = debito + credito + mp + efectivo;
-        
-        document.getElementById(`display_nuevo_total_${id}`).innerText = '$' + total.toLocaleString('es-CL');
+        if (!tipo) {
+            badgeDiv.innerHTML = '';
+            return;
+        }
+
+        const color = (tipo === 'Full Time') ? 'bg-success' : 'bg-secondary';
+        badgeDiv.innerHTML = `<span class="badge ${color}">${tipo}</span>`;
+    }
+
+    function toggleCompDiv(id, select) {
+        const compDiv = document.getElementById(`comp_com_div_${id}`);
+        compDiv.style.display = select.value ? 'flex' : 'none';
+        updateBadge(select, `badge_comp_${id}`);
+        updateComisionToggle(select, `cc_${id}`);
     }
 
     function updateComisionToggle(selectElement, toggleId) {
-        const selectedOption = selectElement.options[selectElement.selectedIndex];
-        const tipoJornada = selectedOption.getAttribute('data-tipo');
+        const option = selectElement.options[selectElement.selectedIndex];
+        const tipoJornada = option.getAttribute('data-tipo');
         const toggleSwitch = document.getElementById(toggleId);
         
         if (toggleSwitch && tipoJornada) {
-            // Si es Full Time, lo enciende (true). Si es Part Time, lo apaga (false).
             toggleSwitch.checked = (tipoJornada === 'Full Time');
         }
+        
+        // Actualizar el badge también
+        const baseId = toggleId.split('_')[1];
+        const targetBadge = toggleId.startsWith('wc') ? `badge_worker_${baseId}` : `badge_comp_${baseId}`;
+        updateBadge(selectElement, targetBadge);
+    }
+
+    // Recalcular total de la línea de producto y el total del sistema
+    function recalcProductLine(input) {
+        const qty = parseInt(input.value) || 0;
+        const price = parseInt(input.getAttribute('data-price')) || 0;
+        const rid = input.getAttribute('data-rid');
+        const row = input.closest('tr');
+        
+        // Actualizar línea individual
+        const lineTotal = qty * price;
+        row.querySelector('.item-total-line').innerText = '$' + lineTotal.toLocaleString('es-CL');
+
+        // Recalcular total general del sistema en el modal
+        const modal = document.getElementById(`editRendicion${rid}`);
+        let newSysTotal = 0;
+        modal.querySelectorAll('.prod-qty-input').forEach(inp => {
+            newSysTotal += (parseInt(inp.value) || 0) * (parseInt(inp.getAttribute('data-price')) || 0);
+        });
+        document.getElementById(`sys_total_${rid}`).innerText = '$' + newSysTotal.toLocaleString('es-CL');
+    }
+
+    function calcTotalEdit(id) {
+        const getVal = (inputId) => parseInt(document.getElementById(inputId).value.replace(/\D/g, '')) || 0;
+        const total = getVal(`edit_debito_${id}`) + getVal(`edit_credito_${id}`) + getVal(`edit_mp_${id}`) + getVal(`edit_efectivo_${id}`);
+        document.getElementById(`display_nuevo_total_${id}`).innerText = '$' + total.toLocaleString('es-CL');
     }
 
     document.addEventListener('DOMContentLoaded', function() {
-    // Escuchar el evento de cierre de cualquier modal que empiece con 'editRendicion'
-    const editModals = document.querySelectorAll('[id^="editRendicion"]');
-    
-    editModals.forEach(modal => {
-        modal.addEventListener('hidden.bs.modal', function () {
-            const form = this.querySelector('form');
-            if (form) {
-                // 1. Resetear campos estándar (inputs, selects, textareas)
-                form.reset();
-                
-                // 2. Forzar la actualización del total visual (el que calculas por JS)
-                const rendicionId = this.id.replace('editRendicion', '');
-                calcTotalEdit(rendicionId);
+        const editModals = document.querySelectorAll('[id^="editRendicion"]');
+        
+        editModals.forEach(modal => {
+            // Inicializar badges al abrir
+            modal.addEventListener('show.bs.modal', function() {
+                const rid = this.id.replace('editRendicion', '');
+                updateBadge(this.querySelector('select[name="worker_id"]'), `badge_worker_${rid}`);
+                const compSelect = this.querySelector('select[name="companion_id"]');
+                if (compSelect.value) updateBadge(compSelect, `badge_comp_${rid}`);
+            });
 
-                // 3. Manejo especial para el div del acompañante (si aplica)
-                const companionSelect = form.querySelector('select[name="companion_id"]');
-                const compDiv = document.getElementById(`comp_com_div_${rendicionId}`);
-                if (companionSelect && compDiv) {
-                    compDiv.style.display = companionSelect.value ? 'block' : 'none';
+            modal.addEventListener('hidden.bs.modal', function () {
+                const form = this.querySelector('form');
+                if (form) {
+                    form.reset();
+                    const rid = this.id.replace('editRendicion', '');
+                    calcTotalEdit(rid);
+                    // Resetear los subtotales visuales de productos
+                    this.querySelectorAll('.prod-qty-input').forEach(inp => recalcProductLine(inp));
                 }
-            }
+            });
         });
     });
-});
 </script>
 {% endblock %}
\ No newline at end of file
diff --git a/templates/macros/modals.html b/templates/macros/modals.html
index d4e0aa5..118b682 100644
--- a/templates/macros/modals.html
+++ b/templates/macros/modals.html
@@ -295,9 +295,9 @@
 </div>
 {% endmacro %}
 
-{% macro edit_rendicion_modal(rendicion, workers, modulos) %}
+{% macro edit_rendicion_modal(rendicion, items, workers, modulos) %}
 <div class="modal fade" id="editRendicion{{ rendicion[0] }}" tabindex="-1" aria-hidden="true">
-    <div class="modal-dialog modal-lg">
+    <div class="modal-dialog modal-xl modal-dialog-scrollable">
         <div class="modal-content">
             <div class="modal-header">
                 <h5 class="modal-title">Editar Rendición #{{ rendicion[0] }}</h5>
@@ -305,105 +305,141 @@
             </div>
             <form method="POST" action="{{ url_for('edit_rendicion', id=rendicion[0]) }}">
                 <div class="modal-body text-start">
-                    <h6 class="border-bottom pb-2 text-primary">Datos Generales</h6>
-                    <div class="row g-3 mb-4">
-                        <div class="col-md-6">
-                            <label class="form-label">Fecha</label>
-                            <input type="date" class="form-control" name="fecha" value="{{ rendicion[1] }}" required>
-                        </div>
-                        <div class="col-md-6">
-                            <label class="form-label">Módulo</label>
-                            <select class="form-select" name="modulo_id" required>
-                                {% for mod in modulos %}
-                                    <option value="{{ mod[0] }}" {% if mod[0] == rendicion[13] %}selected{% endif %}>{{ mod[1] }}</option>
-                                {% endfor %}
-                            </select>
-                        </div>
-                        <div class="col-md-6">
-                            <label class="form-label">Trabajador</label>
-                            <select class="form-select" name="worker_id" onchange="updateComisionToggle(this, 'wc_{{ rendicion[0] }}')" required>
-                                {% for w in workers %}
-                                    <option value="{{ w[0] }}" data-tipo="{{ w[2] }}" {% if w[0] == rendicion[11] %}selected{% endif %}>{{ w[1] }} ({{ w[2] }})</option>
-                                {% endfor %}
-                            </select>
-                            <div class="form-check form-switch mt-2">
-                                <input class="form-check-input" type="checkbox" role="switch" name="worker_comision" id="wc_{{ rendicion[0] }}" {% if rendicion[14] %}checked{% endif %}>
-                                <label class="form-check-label text-warning small" for="wc_{{ rendicion[0] }}"><i class="bi bi-star me-1"></i>Recibe comisión</label>
-                            </div>
-                        </div>
-                        <div class="col-md-6">
-                            <label class="form-label">Acompañante</label>
-                            <select class="form-select" name="companion_id" onchange="document.getElementById('comp_com_div_{{ rendicion[0] }}').style.display = this.value ? 'block' : 'none'; updateComisionToggle(this, 'cc_{{ rendicion[0] }}');">
-                                <option value="" data-tipo="">Sin acompañante</option>
-                                {% for w in workers %}
-                                    <option value="{{ w[0] }}" data-tipo="{{ w[2] }}" {% if w[0] == rendicion[12] %}selected{% endif %}>{{ w[1] }} ({{ w[2] }})</option>
-                                {% endfor %}
-                            </select>
-                            <div class="form-check form-switch mt-2" id="comp_com_div_{{ rendicion[0] }}" {% if not rendicion[12] %}style="display:none;"{% endif %}>
-                                <input class="form-check-input" type="checkbox" role="switch" name="companion_comision" id="cc_{{ rendicion[0] }}" {% if rendicion[15] %}checked{% endif %}>
-                                <label class="form-check-label text-warning small" for="cc_{{ rendicion[0] }}"><i class="bi bi-star me-1"></i>Recibe comisión</label>
+                    <div class="row">
+                        <div class="col-md-8 mb-3">
+                            <div class="card shadow-sm h-100">
+                                <div class="card-header bg-secondary text-white">Productos Vendidos</div>
+                                <div class="card-body p-0">
+                                    <div class="table-responsive">
+                                        <table class="table table-striped mb-0 text-nowrap">
+                                            <thead class="table-dark">
+                                                <tr>
+                                                    <th>Producto</th>
+                                                    <th class="text-center" style="width: 80px;">Cant.</th>
+                                                    <th class="text-end">Precio Un.</th>
+                                                    <th class="text-end">Total Línea</th>
+                                                </tr>
+                                            </thead>
+                                            <tbody>
+                                                {% for item in items %}
+                                                <tr>
+                                                    <td class="text-wrap align-middle" style="min-width: 180px;">{{ item[0] }}</td>
+                                                    <td class="p-1">
+                                                        <input type="number" class="form-control form-control-sm text-center prod-qty-input" 
+                                                               name="qty_{{ item[6] }}" value="{{ item[1] }}" min="0"
+                                                               data-price="{{ item[2] }}" data-rid="{{ rendicion[0] }}"
+                                                               oninput="recalcProductLine(this)">
+                                                    </td>
+                                                    <td class="text-end align-middle text-muted">${{ "{:,.0f}".format(item[2]).replace(',', '.') }}</td>
+                                                    <td class="text-end align-middle fw-bold item-total-line">
+                                                        ${{ "{:,.0f}".format(item[4]).replace(',', '.') }}
+                                                    </td>
+                                                </tr>
+                                                {% endfor %}
+                                            </tbody>
+                                            <tfoot class="table-group-divider">
+                                                <tr>
+                                                    <td colspan="3" class="text-end fw-bold">Total Calculado por Sistema:</td>
+                                                    <td class="text-end fw-bold fs-6 text-primary" id="sys_total_{{ rendicion[0] }}">
+                                                        ${{ "{:,.0f}".format(rendicion[17] or 0).replace(',', '.') }}
+                                                    </td>
+                                                </tr>
+                                            </tfoot>
+                                        </table>
+                                    </div>
+                                </div>
                             </div>
                         </div>
 
-                    <h6 class="border-bottom pb-2 text-success">Declaración de Dinero</h6>
-                    <div class="row g-3">
-                        <div class="col-md-3">
-                            <label class="form-label">Débito</label>
-                            <div class="input-group">
-                                <span class="input-group-text">$</span>
-                                <input type="text" class="form-control" id="edit_debito_{{ rendicion[0] }}" name="venta_debito" value="{{ '{:,.0f}'.format(rendicion[4] or 0).replace(',', '.') }}" oninput="calcTotalEdit({{ rendicion[0] }})">
-                            </div>
-                        </div>
-                        <div class="col-md-3">
-                            <label class="form-label">Crédito</label>
-                            <div class="input-group">
-                                <span class="input-group-text">$</span>
-                                <input type="text" class="form-control" id="edit_credito_{{ rendicion[0] }}" name="venta_credito" value="{{ '{:,.0f}'.format(rendicion[5] or 0).replace(',', '.') }}" oninput="calcTotalEdit({{ rendicion[0] }})">
-                            </div>
-                        </div>
-                        <div class="col-md-3">
-                            <label class="form-label">Mercado Pago</label>
-                            <div class="input-group">
-                                <span class="input-group-text">$</span>
-                                <input type="text" class="form-control money-input" id="edit_mp_{{ rendicion[0] }}" name="venta_mp" value="{{ '{:,.0f}'.format(rendicion[6] or 0).replace(',', '.') }}" oninput="calcTotalEdit({{ rendicion[0] }})" required>
-                            </div>
-                        </div>
-                        <div class="col-md-3">
-                            <label class="form-label">Efectivo</label>
-                            <div class="input-group">
-                                <span class="input-group-text">$</span>
-                                <input type="text" class="form-control money-input" id="edit_efectivo_{{ rendicion[0] }}" name="venta_efectivo" value="{{ '{:,.0f}'.format(rendicion[7] or 0).replace(',', '.') }}" oninput="calcTotalEdit({{ rendicion[0] }})" required>
-                            </div>
-                        </div>
+                        <div class="col-md-4">
+                            <div class="card shadow-sm mb-3 border-info">
+                                <div class="card-header bg-info text-dark fw-bold">Configuración y Dinero</div>
+                                <div class="card-body py-2">
+                                    <div class="mb-2">
+                                        <label class="small text-muted mb-0">Fecha de Rendición</label>
+                                        <input type="date" class="form-control form-control-sm" name="fecha" value="{{ rendicion[1] }}" required>
 
-                        {% set total_declarado_actual = (rendicion[4] or 0) + (rendicion[5] or 0) + (rendicion[6] or 0) + (rendicion[7] or 0) %}
-                        <div class="col-12 mt-3 bg-body-secondary p-3 rounded border border-secondary-subtle">
-                            <div class="d-flex justify-content-between pb-2">
-                                <span class="text-body-secondary">Total Declarado (Original):</span>
-                                <span class="text-body-secondary">${{ "{:,.0f}".format(total_declarado_actual).replace(',', '.') }}</span>
-                            </div>
-                            <div class="d-flex justify-content-between pt-2 border-top border-secondary-subtle">
-                                <strong class="text-info">Nuevo Total Declarado:</strong>
-                                <strong class="text-info fs-5" id="display_nuevo_total_{{ rendicion[0] }}">${{ "{:,.0f}".format(total_declarado_actual).replace(',', '.') }}</strong>
-                            </div>
-                        </div>
+                                        <input type="hidden" name="modulo_id" value="{{ rendicion[13] }}">
+                                        
+                                        <label class="small text-muted mb-0 mt-2 d-block">Trabajador</label>
+                                        <select class="form-select form-select-sm" name="worker_id" onchange="updateComisionToggle(this, 'wc_{{ rendicion[0] }}')" required>
+                                            {% for w in workers %}
+                                                <option value="{{ w[0] }}" data-tipo="{{ w[2] }}" {% if w[0] == rendicion[11] %}selected{% endif %}>{{ w[1] }}</option>
+                                            {% endfor %}
+                                        </select>
+                                        <div class="d-flex justify-content-between align-items-center mt-1">
+                                            <div id="badge_worker_{{ rendicion[0] }}"></div>
+                                            <div class="form-check form-switch m-0">
+                                                <input class="form-check-input" type="checkbox" role="switch" name="worker_comision" id="wc_{{ rendicion[0] }}" {% if rendicion[14] %}checked{% endif %}>
+                                                <label class="form-check-label text-warning small" for="wc_{{ rendicion[0] }}">$ Sí</label>
+                                            </div>
+                                        </div>
+                                    </div>
 
-                        <div class="col-md-4 mt-4">
-                            <label class="form-label text-danger">Gastos</label>
-                            <div class="input-group">
-                                <span class="input-group-text">$</span>
-                                <input type="text" class="form-control money-input border-danger" name="gastos" value="{{ '{:,.0f}'.format(rendicion[8] or 0).replace(',', '.') }}" required>
+                                    <div class="mb-2 border-top pt-2">
+                                        <label class="small text-muted mb-0">Acompañante</label>
+                                        <select class="form-select form-select-sm" name="companion_id" onchange="toggleCompDiv({{ rendicion[0] }}, this)">
+                                            <option value="" data-tipo="">Sin acompañante</option>
+                                            {% for w in workers %}
+                                                <option value="{{ w[0] }}" data-tipo="{{ w[2] }}" {% if w[0] == rendicion[12] %}selected{% endif %}>{{ w[1] }}</option>
+                                            {% endfor %}
+                                        </select>
+                                        <div class="d-flex justify-content-between align-items-center mt-1" id="comp_com_div_{{ rendicion[0] }}" {% if not rendicion[12] %}style="display:none;"{% endif %}>
+                                            <div id="badge_comp_{{ rendicion[0] }}"></div>
+                                            <div class="form-check form-switch m-0">
+                                                <input class="form-check-input" type="checkbox" role="switch" name="companion_comision" id="cc_{{ rendicion[0] }}" {% if rendicion[15] %}checked{% endif %}>
+                                                <label class="form-check-label text-warning small" for="cc_{{ rendicion[0] }}">$ Sí</label>
+                                            </div>
+                                        </div>
+                                    </div>
+
+                                    <div class="row g-1 mt-1 border-top pt-2">
+                                        <div class="col-6">
+                                            <label class="small text-muted mb-0">Débito</label>
+                                            <input type="text" class="form-control form-control-sm text-end money-input" id="edit_debito_{{ rendicion[0] }}" name="venta_debito" value="{{ '{:,.0f}'.format(rendicion[4] or 0).replace(',', '.') }}" oninput="calcTotalEdit({{ rendicion[0] }})">
+                                        </div>
+                                        <div class="col-6">
+                                            <label class="small text-muted mb-0">Crédito</label>
+                                            <input type="text" class="form-control form-control-sm text-end money-input" id="edit_credito_{{ rendicion[0] }}" name="venta_credito" value="{{ '{:,.0f}'.format(rendicion[5] or 0).replace(',', '.') }}" oninput="calcTotalEdit({{ rendicion[0] }})">
+                                        </div>
+                                        <div class="col-6">
+                                            <label class="small text-muted mb-0">Mercado Pago</label>
+                                            <input type="text" class="form-control form-control-sm text-end money-input" id="edit_mp_{{ rendicion[0] }}" name="venta_mp" value="{{ '{:,.0f}'.format(rendicion[6] or 0).replace(',', '.') }}" oninput="calcTotalEdit({{ rendicion[0] }})">
+                                        </div>
+                                        <div class="col-6">
+                                            <label class="small text-muted mb-0">Efectivo</label>
+                                            <input type="text" class="form-control form-control-sm text-end money-input" id="edit_efectivo_{{ rendicion[0] }}" name="venta_efectivo" value="{{ '{:,.0f}'.format(rendicion[7] or 0).replace(',', '.') }}" oninput="calcTotalEdit({{ rendicion[0] }})">
+                                        </div>
+                                    </div>
+
+                                    <div class="d-flex justify-content-between mt-3 pt-2 border-top">
+                                        <strong class="fs-6">Total Declarado:</strong>
+                                        <strong class="fs-5 text-info" id="display_nuevo_total_{{ rendicion[0] }}">${{ "{:,.0f}".format((rendicion[4] or 0) + (rendicion[5] or 0) + (rendicion[6] or 0) + (rendicion[7] or 0)).replace(',', '.') }}</strong>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div class="card shadow-sm border-danger">
+                                <div class="card-header bg-danger text-white fw-bold">Gastos y Observaciones</div>
+                                <div class="card-body py-2">
+                                    <div class="mb-2">
+                                        <label class="small text-danger fw-bold">Monto Gastos</label>
+                                        <div class="input-group input-group-sm">
+                                            <span class="input-group-text bg-dark border-danger text-danger">-$</span>
+                                            <input type="text" class="form-control money-input border-danger text-end" name="gastos" value="{{ '{:,.0f}'.format(rendicion[8] or 0).replace(',', '.') }}" required>
+                                        </div>
+                                    </div>
+                                    <div class="mb-0">
+                                        <label class="small text-muted">Observaciones</label>
+                                        <textarea class="form-control form-control-sm bg-dark text-white" name="observaciones" rows="2">{{ rendicion[9] }}</textarea>
+                                    </div>
+                                </div>
                             </div>
-                        </div>
-                        <div class="col-md-8 mt-4">
-                            <label class="form-label">Observaciones</label>
-                            <textarea class="form-control" name="observaciones" rows="1">{{ rendicion[9] }}</textarea>
                         </div>
                     </div>
-                </div>
-                <div class="modal-footer">
-                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
-                    <button type="submit" class="btn btn-primary">Guardar Cambios</button>
+                </div> <div class="modal-footer py-2">
+                    <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Cancelar</button>
+                    <button type="submit" class="btn btn-primary btn-sm px-4">Guardar Cambios</button>
                 </div>
             </form>
         </div>