diff --git a/static/style.css b/static/style.css
index 67647a6..098474d 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1,4 +1,4 @@
-
+/* navbar */
 .navbar {
     padding-top: 0.75rem;
     padding-bottom: 0.75rem;
@@ -13,46 +13,31 @@
     transition: color 0.2s ease-in-out;
 }
 
-/* Estilo para los elementos del dropdown al pasar el mouse */
-.dropdown-menu-dark .dropdown-menu-item {
-    color: #dee2e6;
-    text-decoration: none;
-    padding: 0.25rem 1rem;
-    display: block;
-    width: 100%;
-    clear: both;
-    font-weight: 400;
-    text-align: inherit;
-    white-space: nowrap;
-    background-color: transparent;
-    border: 0;
-    transition: background-color 0.15s ease-in-out;
+[data-bs-theme="light"] #theme-icon.bi-moon-stars {
+    color: #5856d6;
 }
 
-.dropdown-menu-dark .dropdown-menu-item:hover {
-    color: #fff;
-    background-color: rgba(255, 255, 255, 0.1);
-    border-radius: 6px;
+[data-bs-theme="dark"] #theme-icon.bi-sun {
+    color: #ffc107;
 }
 
-/* Separación de iconos en dropdowns */
-.dropdown-menu-item i {
-    width: 1.25rem;
-    text-align: center;
+#theme-switcher.nav-link {
+    color: inherit !important;
 }
 
+/* form edicion de trabajador */
 [data-bs-theme="dark"] .form-control[readonly] {
-    background-color: #1a1d21; /* Un fondo casi negro, más oscuro que el modal */
-    border-color: #373b3e;     /* Un borde sutil */
-    color: #e3e6e8;             /* Texto blanco grisáceo, muy legible */
-    opacity: 1;                 /* Evita la opacidad predeterminada de Bootstrap */
-    cursor: not-allowed;        /* Refuerza visualmente que no es editable */
+    background-color: #1a1d21;
+    border-color: #373b3e;    
+    color: #e3e6e8;           
+    opacity: 1;               
+    cursor: not-allowed;      
 }
 
 [data-bs-theme="dark"] .text-muted-rut {
     color: #adb5bd !important; /* Un gris medio para el label "RUT (No editable)" */
 }
-
+/* botones acciones */
 @media (max-width: 576px) {
     .col-barcode {
         display: none;
@@ -65,14 +50,22 @@
     }
 }
 
-[data-bs-theme="light"] #theme-icon.bi-moon-stars {
-    color: #5856d6; /* Un color índigo vibrante para que resalte en el fondo claro */
+/* fila calculo total dashboard trabajador */
+
+[data-bs-theme="dark"] .custom-total-row {
+    background-color: rgba(30, 41, 59, 0.7);
+    color: #f8fafc;
+    border-top: 2px solid #334155;
 }
 
-[data-bs-theme="dark"] #theme-icon.bi-sun {
-    color: #ffc107; /* Amarillo cálido de Bootstrap */
+[data-bs-theme="dark"] #total_productos_calc {
+    box-shadow: none;
+    outline: none;
+    text-align: right;
+    padding-right: 0;
 }
 
-#theme-switcher.nav-link {
-    color: inherit !important;
+.text-info {
+    color: #38bdf8 !important; /* Azul cielo moderno */
+    text-shadow: 0 0 10px rgba(56, 189, 248, 0.2);
 }
\ No newline at end of file
diff --git a/templates/worker_dashboard.html b/templates/worker_dashboard.html
index c0f8777..61a58b4 100644
--- a/templates/worker_dashboard.html
+++ b/templates/worker_dashboard.html
@@ -1,4 +1,5 @@
 {% extends "macros/base.html" %}
+{% from 'macros/modals.html' import confirm_modal %}
 
 {% block title %}Rendición de Caja{% endblock %}
 
@@ -82,6 +83,21 @@
                     </tr>
                     {% endfor %}
                 </tbody>
+
+                <!-- OPCIONAL -->
+                <tfoot class="table-group-divider">
+                    <tr class="custom-total-row fw-bold"> <td colspan="{% if has_commission %}3{% else %}2{% endif %}" class="text-end align-middle">
+                            Total Venta por Productos:
+                        </td>
+                        <td>
+                            <div class="input-group input-group-sm">
+                                <span class="input-group-text border-0 bg-transparent text-info">$</span>
+                                <input type="text" class="form-control border-0 bg-transparent text-info fw-bold fs-5" id="total_productos_calc" value="0" readonly>
+                            </div>
+                        </td>
+                    </tr>
+                </tfoot>
+                <!-- OPCIONAL -->
             </table>
         </div>
     </div>
@@ -136,11 +152,90 @@
         </div>
     </div>
 
-    <button type="submit" class="btn btn-primary w-100 py-3 mb-5" onclick="return confirm('¿Enviar rendición? Revisa bien las cantidades.');">Enviar Rendición Diaria</button>
+    <button type="button" class="btn btn-primary w-100 py-3 mb-5" data-bs-toggle="modal" data-bs-target="#confirmSubmitModal">
+        <i class="bi bi-send-check me-2"></i> Enviar Rendición Diaria
+    </button>
 </form>
+
+{{ confirm_modal(
+    id='confirmSubmitModal',
+    title='¿Enviar Rendición?',
+    message='Asegúrate de que todas las cantidades y montos ingresados sean correctos. Una vez enviada, no podrás editarla.',
+    action_url='#',
+    btn_class='btn-success',
+    btn_text='Sí, enviar ahora'
+) }}
 {% endblock %}
 
 {% block scripts %}
+<script>
+    const inputsCantidad = document.querySelectorAll('input[name^="qty_"]');
+    const displayTotalProductos = document.getElementById('total_productos_calc');
+
+    function calcularVentaProductos() {
+        let granTotal = 0;
+
+        // Buscamos todas las filas del cuerpo de la tabla
+        const filas = document.querySelectorAll('tbody tr');
+        
+        filas.forEach(fila => {
+            const inputQty = fila.querySelector('input[name^="qty_"]');
+            if (inputQty) {
+                const cantidad = parseInt(inputQty.value) || 0;
+                // Extraemos el precio del texto de la segunda celda (quitando '$' y '.')
+                const precioTexto = fila.cells[1].innerText.replace(/\D/g, '');
+                const precio = parseInt(precioTexto) || 0;
+                
+                granTotal += (cantidad * precio);
+            }
+        });
+
+        displayTotalProductos.value = granTotal.toLocaleString('es-CL');
+    }
+
+    // Escuchar cambios en las cantidades de productos
+    inputsCantidad.forEach(input => {
+        input.addEventListener('input', calcularVentaProductos);
+    });
+</script>
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    const submitModal = document.getElementById('confirmSubmitModal');
+    const mainForm = document.querySelector('form'); // El formulario de la rendición
+
+    // Buscamos el botón de confirmar dentro del modal
+    const confirmBtn = submitModal.querySelector('button[type="submit"]');
+    
+    // Cambiamos su comportamiento: que no haga el submit del form del modal, 
+    // sino del formulario principal
+    confirmBtn.addEventListener('click', function(e) {
+        e.preventDefault();
+        
+        // Ejecutamos la validación manual antes de enviar
+        const requiredInputs = mainForm.querySelectorAll('[required]');
+        let valid = true;
+
+        requiredInputs.forEach(input => {
+            if (!input.value.trim()) {
+                input.classList.add('is-invalid');
+                valid = false;
+            } else {
+                input.classList.remove('is-invalid');
+            }
+        });
+
+        if (valid) {
+            mainForm.submit();
+        } else {
+            // Si no es válido, cerramos el modal y avisamos
+            const modalInstance = bootstrap.Modal.getInstance(submitModal);
+            modalInstance.hide();
+            alert("Por favor, rellena todos los campos obligatorios antes de enviar.");
+        }
+    });
+});
+</script>
+
 <script>
     const inputsVenta = document.querySelectorAll('.sale-input');
     const displayDigital = document.getElementById('total_digital');