<div class="modal fade" id="modalConfirmacion" tabindex="-1">

    <div class="modal-dialog">
        <div class="modal-content">

            <!-- HEADER -->

            <div class="modal-header">

                <!-- Se completa dinámicamente desde JS (data-titulo) -->

                <h5 id="modalTitulo"></h5>
            </div>

            <!-- BODY -->

            <div class="modal-body">

                <!-- Mensaje dinámico desde data-mensaje -->

                <p id="modalMensaje"></p>
            </div>

            <!-- FORM REUTILIZABLE -->

            <form id="formConfirmacionGlobal" method="POST">

                <!-- Este form se usa para todas las acciones del modal -->

                <input type="hidden" name="csrf_token" value="<?= $_SESSION['csrf_token'] ?>">

                <!-- Contenedor en donde JS inserta los inputs hidden con los valores pasados a travéz de data-* -->

                <div id="modalDynamicInputs"></div>

                <!-- Botón Cancelar -->

                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        Cancelar
                    </button>

                    <!-- Botón Confirmar -->

                    <button type="submit" id="modalBtnConfirmar" class="btn btn-primary">

                        <!-- Este botón es interceptado por JS -->
                        <!-- preventDefault() evita el submit automático -->
                        <!-- JS arma el form y luego hace submit manual -->

                        Confirmar
                    </button>
                </div>

            </form>
        </div>
    </div>
</div>